React Router 是 React 应用程序中用于管理路由的库。它允许你为不同的路径定义组件，并使用 Link 组件来导航。

安装

首先，你需要安装 React Router。你可以使用 npm 或 yarn 来安装：

npm install react-router-dom

yarn add react-router-dom

基本用法

React Router 使用 Router 组件来包裹你的应用程序，并使用 Route 组件来定义路由。

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

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
        <Route path="/" exact component={Home} />
        <Route component={NoMatch} />
      </Switch>
    </Router>
  );
}

在上面的代码中，我们定义了三个路由：/about、/contact 和 /。Switch 组件确保只有第一个匹配的路由被渲染。

链接

要创建链接，你可以使用 Link 组件：

import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>
    </nav>
  );
}

高级用法

React Router 还支持许多高级功能，例如：

  • 动态路由参数
  • 命名路由
  • 导航守卫
  • 嵌套路由

更多高级用法，请访问React Router 官方文档。

想要了解更多关于 React Router 的信息，可以查看我们的React Router 教程。

React_Router