React 教程第十篇 —— 路由（3.0）

在前两篇中，我们介绍了 React Router 和路由的基础知识，以及如何在应用中使用路由。在本篇中，我们将深入学习 React Router，并介绍一些更高级的用法。

## 动态路由

在前面的教程中，我们已经学习了如何定义静态路由。但是在实际开发中，我们通常需要处理动态路由。例如，我们可能需要在 URL 中传递参数，以便根据参数来渲染不同的组件。

在 React Router 中，我们可以使用 `:param` 来定义动态路由参数。例如，我们可以定义一个动态路由 `/user/:id`，其中 `:id` 表示一个动态参数，表示用户的 ID。当浏览器访问 `/user/123` 时，React Router 会自动将 `123` 作为参数传递给对应的组件。

下面是一个简单的例子：

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

function User({ match }) {
  return <h1>Hello, {match.params.id}!</h1>;
}

function App() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/user/123">User 123</Link>
          </li>
          <li>
            <Link to="/user/456">User 456</Link>
          </li>
        </ul>
        <Route path="/user/:id" component={User} />
      </div>
    </Router>
  );
}

在上面的例子中，我们定义了一个动态路由 `/user/:id`，其中 `:id` 表示用户的 ID。当浏览器访问 `/user/123` 时，React Router 会自动将 `123` 作为参数传递给 `User` 组件，并显示 `Hello, 123!`。

同样，当浏览器访问 `/user/456` 时，React Router 会自动将 `456` 作为参数传递给 `User` 组件，并显示 `Hello, 456!`。

## 嵌套路由

在实际开发中，我们经常需要在一个页面中嵌套多个组件。在 React Router 中，我们可以使用嵌套路由来实现这个功能。

具体来说，我们可以在一个组件中定义多个 `<Route>` 组件，从而实现嵌套路由。例如，我们可以定义一个嵌套路由 `/user/:id/posts`，其中 `:id` 表示用户的 ID，`posts` 表示用户的帖子列表。

下面是一个简单的例子：

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

function User({ match }) {
  return (
    <div>
      <h1>Hello, {match.params.id}!</h1>
      <ul>
        <li>
          <Link to={`${match.url}/posts`}>Posts</Link>
        </li>
      </ul>
      <Route path={`${match.path}/posts`} component={Posts} />
    </div>
  );
}

function Posts() {
  return <h2>Posts</h2>;
}

function App() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/user/123">User 123</Link>
          </li>
          <li>
            <Link to="/user/456">User 456</Link>
          </li>
        </ul>
        <Route path="/user/:id" component={User} />
      </div>
    </Router>
  );
}

在上面的例子中，我们定义了一个嵌套路由 `/user/:id/posts`，其中 `:id` 表示用户的 ID，`posts` 表示用户的帖子列表。当浏览器访问 `/user/123/posts` 时，React Router 会自动将 `123` 作为参数传递给 `User` 组件，并显示 `Posts` 组件。

## 路由守卫

在实际开发中，我们通常需要实现一些路由守卫功能，例如登录验证、权限控制等。在 React Router 中，我们可以使用 `Route` 组件的 `render` 属性来实现路由守卫。

具体来说，我们可以定义一个高阶组件 `AuthRoute`，用来检查用户是否登录。如果用户已登录，则渲染对应的组件；否则，跳转到登录页面。

下面是一个简单的例子：

import { BrowserRouter as Router, Route, Link, Redirect } from "react-router-dom";

function AuthRoute({ component: Component, ...rest }) {
  const isAuthenticated = localStorage.getItem("isAuthenticated");

  return (
    <Route
      {...rest}
      render={(props) =>
        isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect to={{ pathname: "/login", state: { from: props.location } }} />
        )
      }
    />
  );
}

function Home() {
  return <h1>Welcome Home!</h1>;
}

function Login() {
  const login = () => {
    localStorage.setItem("isAuthenticated", true);
  };

  return (
    <div>
      <h2>Login</h2>
      <button onClick={login}>Login</button>
    </div>
  );
}

function App() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/login">Login</Link>
          </li>
        </ul>
        <AuthRoute exact path="/" component={Home} />
        <Route path="/login" component={Login} />
      </div>
    </Router>
  );
}

在上面的例子中，我们定义了一个高阶组件 `AuthRoute`，用来检查用户是否登录。如果用户已登录，则渲染对应的组件；否则，跳转到登录页面。具体来说，我们首先从本地存储中检查用户是否已登录，然后根据检查结果来渲染对应的组件或跳转到登录页面。

## 总结

在本篇教程中，我们深入学习了 React Router，并介绍了一些更高级的用法。具体来说，我们学习了如何定义动态路由、嵌套路由和路由守卫。

希望通过本篇教程，你已经掌握了 React Router 的高级用法，并能够在实际开发中灵活使用。