在 React 应用中，路由是一种用来管理应用内部不同页面切换的技术。它允许我们通过 URL 的变化来动态地展示不同的组件，而无需重新加载整个页面。本章将详细介绍如何使用 React Router 来构建和管理复杂的单页应用。
安装 React Router
首先，我们需要安装 react-router-dom 包，这是 React 生态系统中最常用的路由库之一。你可以通过 npm 或 yarn 来安装：
npm install react-router-dom # 或者 yarn add react-router-dom
基本路由配置
接下来，让我们来看一下基本的路由配置。我们将在应用中使用 <BrowserRouter> 组件来包裹整个应用，并使用 <Route> 组件来定义路由规则。
-- -------------------- ---- -------
------ - ------------- -- ------- ------ ------ - ---- -------------------
------ ---- ---- --------------------
------ ----- ---- ---------------------
------ -------- ---- ------------------------
-------- ----- -
------ -
--------
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ -------------------- --
---------
---------
--
-
------ ------- ----上述代码展示了如何设置两个简单的路由：主页和关于页面。当用户访问根路径时，会显示 Home 组件；当访问 /about 时，会显示 About 组件。如果访问的路径没有匹配任何路由，则会显示 NotFound 组件。
动态路由和参数
有时候，我们需要根据 URL 中的某些参数来动态显示内容。这时可以使用带有参数的路由。例如，如果我们有一个博客应用，每个文章都有一个唯一的 ID，我们可以这样设置路由：
<Route path="/posts/:postId" component={PostDetail} />然后在组件中，可以通过 useParams 钩子来获取这些参数：
import { useParams } from 'react-router-dom';
function PostDetail() {
let { postId } = useParams();
// 使用 postId 获取对应的文章数据并渲染
}嵌套路由
嵌套路由是指在一个路由内部嵌套另一个路由。这在需要在一个主页面中展示多个子页面时非常有用。例如，我们可以为用户设置一个个人中心页面，并在此页面下添加多个子页面如个人信息、订单信息等。
<Route path="/profile"> <ProfilePage /> </Route>
在 ProfilePage 组件中，我们可以继续定义子路由：
-- -------------------- ---- -------
-------- ------------- -
------ -
-----
-------------
--------
------ -------------------- -------------------- --
------ ---------------------- --------------------- --
---------
------
--
-这样，当我们访问 /profile/info 和 /profile/orders 时，就会分别显示 UserInfo 和 OrderInfo 组件的内容。
使用 Link 进行导航
为了方便用户在不同页面之间进行导航，我们可以使用 <Link> 组件代替传统的 <a> 标签。<Link> 组件不仅提供了更好的用户体验，还可以避免页面刷新，从而实现平滑的过渡效果。
-- -------------------- ---- -------
------ - ---- - ---- -------------------
-------- -------- -
------ -
-----
----
--------- ---------------------
--------- ----------------------------
--------- -----------------------------------
-----
------
--
-通过以上介绍，你应该对如何使用 React Router 构建复杂的单页应用有了一个基本的认识。下一节我们将探讨更高级的主题，如路由守卫、懒加载等。