如何使用“react-router-dom”的元素 - Javascript

React Router 是 React DOM 中的一种用于管理应用程序路由的库。它使开发人员能够在 React 应用程序中实现多个视图，并且可以让用户在视图之间快速轻松地切换。在本文中，我们将介绍 React Router DOM，它是 React Router 的 Web 版本。

什么是 React Router DOM？

React Router 是一个专门为 React 应用程序开发的路由库。React Router DOM 是它的 Web 版本，开发人员可以使用它来在运行 React 的 Web 应用程序中管理路由。它提供了各种 React 组件和 API，可以帮助你构建具有多个视图和嵌套路由的 React 应用程序。

安装 React Router DOM

要使用 React Router DOM，你需要先安装它。你可以使用 npm 或者 yarn 来安装它，只需要在终端输入以下命令：

npm install react-router-dom

或

yarn add react-router-dom

完成安装后，你就可以在 React 应用程序中使用 React Router DOM 了。

React Router DOM 中的元素

React Router DOM 提供了许多 React 元素和组件，这些元素和组件可以帮助你在应用程序中实现路由。下面是一些常用的元素和组件：

• Router: 路由的根组件，它会包含其他路由组件。
• Route: 定义路由的组件，指定了某个 URL 对应的组件。
• Link: 定义路由的链接组件，它会渲染为一个可以点击的链接。
• Switch: 用于切换不同路由的组件，它会在所有 Route 组件中找到匹配当前 URL 的第一个组件，并渲染该组件。

下面是一个简单的示例，演示如何使用以上元素创建路由。

import React from 'react';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';

const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;
const Contact = () => <h1>Contact</h1>;

const App = () => (
  <Router>
    <nav>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/contact">Contact</Link></li>
      </ul>
    </nav>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </Switch>
  </Router>
);

export default App;

在上面的代码中，我们定义了三个路由组件：Home、About、Contact。然后，我们使用 Router、Link 和 Route 组件来定义路由。最后，我们将 Switch 组件用于切换路由。

总结

React Router DOM 是 React 应用程序的路由库，它提供了许多组件和元素，可以帮助你在应用程序中实现路由。本文介绍了 React Router DOM 的一些常用元素和组件，希望对你在开发 React 应用程序时有所帮助。