react 路由使用详情

React Router 是一款 React 官方推荐的路由库，用于管理 React 应用的路由。下面是 React Router 的使用详情：

### 安装

使用 npm 安装 React Router：

npm install react-router-dom

### 基本用法

在应用中引入 React Router，然后在组件中使用 `BrowserRouter` 或 `HashRouter` 组件来包裹路由。

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

function App() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>

        <hr />

        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/contact">
            <Contact />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

上面的例子中，`BrowserRouter` 组件使用 HTML5 history API 来保持 UI 和 URL 的同步。如果你的应用需要支持旧的浏览器，可以使用 `HashRouter` 组件。

在路由中，`Link` 组件用于跳转到其他页面。`Route` 组件用于渲染页面。`Switch` 组件用于包裹 `Route` 组件，确保只有一个路由被渲染。

### 动态路由

React Router 支持动态路由。你可以在路由路径中使用 `:paramName` 来定义动态参数。

function App() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/users/123">User 123</Link>
          </li>
          <li>
            <Link to="/users/456">User 456</Link>
          </li>
        </ul>

        <hr />

        <Switch>
          <Route path="/users/:userId">
            <User />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function User() {
  let { userId } = useParams();

  return <h2>User ID: {userId}</h2>;
}

在路由路径中使用 `:userId` 定义了动态参数，然后在 `User` 组件中使用 `useParams()` 钩子来获取该参数的值。

### 嵌套路由

React Router 支持嵌套路由。在路由组件中，你可以使用 `Route` 组件来定义子路由。

function App() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/users">Users</Link>
          </li>
        </ul>

        <hr />

        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Users() {
  return (
    <div>
      <h2>Users</h2>

      <ul>
        <li>
          <Link to="/users/123">User 123</Link>
        </li>
        <li>
          <Link to="/users/456">User 456</Link>
        </li>
      </ul>

      <Switch>
        <Route path="/users/:userId">
          <User />
        </Route>
      </Switch>
    </div>
  );
}

function User() {
  let { userId } = useParams();

  return <h3>User ID: {userId}</h3>;
}

在 `Users` 组件中，使用 `Link` 组件跳转到 `/users/:userId` 路由路径。然后在 `Users` 组件中使用另一个 `Switch` 和 `Route` 来定义 `/users/:userId` 的子路由。