第9章 React全家桶深入探索

9.3 使用React Router的动态路由

在构建现代Web应用程序时，路由管理是一项至关重要的功能。它决定了用户如何导航到应用的不同部分，并控制着页面内容的加载和渲染。React Router作为React生态系统中最流行的路由库之一，提供了丰富的功能来支持单页面应用（SPA）的路由管理。在本章中，我们将深入探讨React Router中的动态路由（Dynamic Routing）功能，它是构建复杂、灵活页面导航结构的关键。

9.3.1 动态路由基础

动态路由允许我们根据URL中的某些参数来动态地加载和渲染组件。这在处理如用户资料页、产品详情页等需要根据ID或名称等参数展示不同内容的页面时特别有用。React Router通过其<Route>组件配合特殊语法或钩子（Hooks）来实现这一功能。

9.3.2 设置基础路由

在开始探讨动态路由之前，我们需要确保已经正确设置了React Router。通常，这意味着你需要在你的React应用中引入并使用<BrowserRouter>（或<HashRouter>，根据你的需要）作为最顶层的路由容器，并在其中嵌套<Routes>和<Route>组件来定义应用的路由结构。

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
function App() {
  return (
    <Router>
      <Routes>
        {/* 基础路由配置 */}
        <Route path="/" element={<HomePage />} />
        {/* 接下来是动态路由的配置 */}
      </Routes>
    </Router>
  );
}

9.3.3 创建动态路由

动态路由通常通过在<Route>组件的path属性中使用参数化路径（例如/user/:id）来定义。这里的:id是一个参数占位符，它表示这个路由将匹配任何以/user/开头，后面跟着任何字符的URL路径，并且这些字符将被视为一个名为id的参数。

<Route path="/user/:id" element={<UserProfile />} />

在这个例子中，当用户访问如/user/123这样的URL时，React Router将渲染<UserProfile>组件，并允许你通过某种方式访问到id参数的值（在这个例子中是123）。

9.3.4 访问路由参数

在React Router v6中，你可以通过useParams钩子在组件内部访问到路由参数。这个钩子返回一个对象，其属性名与URL中的参数名相对应。

import { useParams } from 'react-router-dom';
function UserProfile() {
  let { id } = useParams();
  return <div>User ID: {id}</div>;
}

在上述UserProfile组件中，useParams钩子被用来获取当前路由的参数，并解构出id参数的值。这样，你就可以根据这个id来加载和展示对应的用户信息了。

9.3.5 嵌套动态路由

有时，你可能需要在动态路由内部再嵌套一层或多层路由，以构建更复杂的页面结构。React Router同样支持这种嵌套路由的写法。

<Route path="/user/:userId" element={
  <UserLayout>
    <Routes>
      <Route index element={<UserDashboard />} />
      <Route path="posts" element={<UserPosts />} />
      <Route path="profile" element={<UserProfileDetails />} />
    </Routes>
  </UserLayout>
} />

在这个例子中，/user/:userId是一个动态路由，它内部嵌套了三个子路由：一个默认路由（当访问/user/:userId但不指定具体子路径时显示UserDashboard），以及两个带有具体路径的路由（/user/:userId/posts和/user/:userId/profile）。UserLayout组件可以被用来作为这些子路由的公共布局或容器。

9.3.6 使用useNavigate进行编程式导航

虽然动态路由主要关注于如何根据URL的变化来渲染不同的组件，但了解如何在应用中编程式地导航到这些路由同样重要。React Router v6引入了useNavigate钩子，它允许你在组件内部以编程方式执行路由跳转。

import { useNavigate } from 'react-router-dom';
function SomeComponent() {
  let navigate = useNavigate();
  function handleClick() {
    navigate(`/user/${userId}`, { replace: true }); // 使用replace模式跳转到用户详情页
  }
  return <button onClick={handleClick}>Go to User</button>;
}

在这个例子中，当用户点击按钮时，handleClick函数会被调用，并使用useNavigate返回的navigate函数将应用导航到/user/:userId路径。通过设置{ replace: true }选项，当前路由会被新的路由替换，而不是被添加到历史记录中。

9.3.7 实战案例：构建产品详情页

假设我们正在开发一个电商网站，并需要实现一个产品详情页，该页面根据URL中的产品ID来加载并展示对应的产品信息。以下是使用React Router动态路由实现这一功能的基本步骤：

1. 定义路由：在<Routes>组件中定义一个动态路由，如<Route path="/product/:productId" element={<ProductDetail />} />。

2. 创建ProductDetail组件：在该组件中，使用useParams钩子获取productId参数，并根据这个ID加载产品数据。

3. 加载产品数据：可以使用如Axios或Fetch等HTTP客户端来根据productId从后端API获取产品数据，并在组件中渲染这些数据。

4. 添加导航链接：在应用的其他部分（如产品列表页）添加导航链接，使用户能够点击链接并跳转到产品详情页。

9.3.8 小结

动态路由是React Router中一个非常强大的功能，它允许你根据URL的变化来动态地加载和渲染不同的组件，从而构建出灵活、可扩展的Web应用程序。通过合理使用<Route>组件、useParams钩子和useNavigate钩子，你可以轻松实现复杂的路由逻辑和页面导航。在本章中，我们介绍了动态路由的基本概念、如何设置和访问路由参数、嵌套动态路由的用法，以及如何通过编程方式进行路由跳转。希望这些内容能帮助你更好地理解和使用React Router来构建你的React应用。