{/* 定义你的路由规则集合 */}
  <Routes>
    {/* Route for the home page */}
    <Route path="/" element={<HomePage />} />

    {/* Route for the about page */}
    <Route path="/about" element={<AboutPage />} />

    {/* Route for the contact page */}
    <Route path="/contact" element={<ContactPage />} />

    {/* Catch-all route for 404 - MUST be the last route */}
    {/* 后面会详细讲解 */}
    <Route path="*" element={<NotFoundPage />} />
  </Routes>

  {/* 可以在这里放置页脚等固定元素 */}
  {/* <Footer /> */}
</div>

  {/* 定义一个带有 'username' 参数的路由 */}
  <Route path="/users/:username" element={<UserProfilePage />} />

  {/* ... 其他路由 */}
</Routes>

产品详情

您正在查看产品 ID 为: {productId} 的详情。

{/ 在这里渲染产品的详细信息 /}

    {/* 索引路由：当 path 为 /dashboard 时，匹配并渲染此组件 */}
    <Route index element={<DashboardOverview />} />

    {/* 当 path 为 /dashboard/settings 时，匹配并渲染此组件 */}
    <Route path="settings" element={<DashboardSettings />} />

    {/* 当 path 为 /dashboard/messages 时，匹配并渲染此组件 */}
    <Route path="messages" element={<DashboardMessages />} />

    {/* 如果需要，可以为仪表盘下的无效路径定义 404 */}
    {/* <Route path="*" element={<DashboardNotFound />} /> */}
  </Route>

  {/* ... 其他顶级路由 */}
</Routes>

仪表盘

  {/* 仪表盘子导航 */}
  <nav>
    <ul>
      {/* Link to the index route (implicitly /dashboard) */}
      <li><Link to="/dashboard">概览</Link></li>
      {/* Link to /dashboard/settings */}
      <li><Link to="/dashboard/settings">设置</Link></li>
      {/* Link to /dashboard/messages */}
      <li><Link to="/dashboard/messages">消息</Link></li>
    </ul>
  </nav>

  <hr />

  {/* Outlet: 子路由会在这里渲染 */}
  <div className="dashboard-content">
    <Outlet />
  </div>
</div>

);
}

export default DashboardLayout;
“`

现在，当你访问：

• /dashboard 时，会渲染 <DashboardLayout />，并且 <Outlet /> 位置渲染 <DashboardOverview />。
• /dashboard/settings 时，会渲染 <DashboardLayout />，并且 <Outlet /> 位置渲染 <DashboardSettings />。
• /dashboard/messages 时，会渲染 <DashboardLayout />，并且 <Outlet /> 位置渲染 <DashboardMessages />。

嵌套路由是组织复杂应用视图和布局的强大工具。

8. 程序化导航 (useNavigate)：代码控制跳转

有时候，你需要在某些事件发生后（例如，表单提交成功、用户登录或点击一个非 Link 或 NavLink 的元素）通过代码来控制页面跳转。React Router 提供了 useNavigate Hook 来实现这一功能。

useNavigate Hook 返回一个函数，调用这个函数就可以进行导航。

“`jsx
import React from ‘react’;
import { useNavigate } from ‘react-router-dom’;

function LoginForm() {
const navigate = useNavigate(); // 调用 Hook 获取导航函数

const handleSubmit = (event) => {
event.preventDefault();
// 处理登录逻辑…

const isLoginSuccessful = true; // 假设登录成功

if (isLoginSuccessful) {
  console.log('登录成功，即将跳转...');
  // 调用 navigate 函数进行跳转
  navigate('/dashboard');

  // 也可以带上状态信息，在目标页面通过 useLocation().state 获取
  // navigate('/dashboard', { state: { message: 'Welcome Back!' } });

  // 也可以替代当前历史记录条目（比如登录成功后，按返回键不会回到登录页）
  // navigate('/dashboard', { replace: true });

  // 后退一步
  // navigate(-1);

  // 前进一步
  // navigate(1);
} else {
  console.log('登录失败');
}

};

return (

{/ 表单输入 /}
登录

);
}

export default LoginForm;
“`

navigate 函数的常见用法：

• navigate('/path'): 跳转到指定路径。
• navigate('/path', { replace: true }): 跳转到指定路径并替换当前历史记录条目，这样用户点击浏览器后退按钮时不会回到原页面。
• navigate('/path', { state: { key: value } }): 跳转并传递一些状态数据，可以在目标页面通过 useLocation().state 获取。
• navigate(-1): 后退一步，相当于点击浏览器后退按钮。
• navigate(1): 前进一步，相当于点击浏览器前进按钮。

9. 处理 404 (页面未找到)

当用户访问一个你的应用中没有定义匹配规则的 URL 时，通常应该显示一个“页面未找到”的页面 (404 Page)。在 React Router 中实现这一点非常简单：在你的 <Routes> 定义的最后添加一个 path="*" 的 <Route>。

path="*" 是一种通配符匹配，它会匹配任何没有被前面的路由匹配到的 URL。因为 Routes 是从上往下查找并只渲染第一个匹配的路由，所以将这个通配符路由放在最后，可以确保它只在所有其他路由都不匹配时才生效。

“`jsx
// src/App.js 或你的路由配置
import { Routes, Route } from ‘react-router-dom’;
import HomePage from ‘./pages/HomePage’;
import AboutPage from ‘./pages/AboutPage’;
// … 其他页面
import NotFoundPage from ‘./pages/NotFoundPage’; // 导入 404 页面组件

function App() {
return (

} />
} />
{/ … 其他具体的路由 … /}

  {/* 404 页面：匹配所有未被上面路由匹配到的路径 */}
  {/* 必须放在 Routes 的最后 */}
  <Route path="*" element={<NotFoundPage />} />
</Routes>

);
}
“`

NotFoundPage 组件可以是一个简单的 React 组件，显示“页面未找到”的信息。

“`jsx
// src/pages/NotFoundPage.js
import React from ‘react’;
import { useLocation } from ‘react-router-dom’; // 可以获取当前 URL

function NotFoundPage() {
const location = useLocation();

return (

);
}

export default NotFoundPage;
“`

10. 重定向 (Navigate)

有时候你需要将用户从一个 URL 自动重定向到另一个 URL。例如，你可能有一个旧的 URL /old-path，现在希望用户访问时自动跳转到 /new-path；或者，如果用户已经登录，当他们访问 /login 页面时，自动跳转到 /dashboard。

React Router 提供了 Navigate 组件来实现声明式重定向。当 Navigate 组件被渲染时，它会立即改变当前的 URL 并触发 React Router 渲染匹配新 URL 的组件。

Navigate 组件接收一个 to prop 来指定重定向的目标路径，以及一个可选的 replace prop 来指定是否替换当前历史记录条目 (类似于 useNavigate 的 { replace: true } 选项)。

作为 Route 的 element 进行重定向 (常用场景：旧 URL 重定向):

“`jsx
// src/App.js 或你的路由配置
import { Routes, Route, Navigate } from ‘react-router-dom’;
import NewPage from ‘./pages/NewPage’;

function App() {
return (

{/ … 其他路由 … /}

  {/* 当用户访问 /old-path 时，自动重定向到 /new-path */}
  <Route path="/old-path" element={<Navigate to="/new-path" replace />} />

  {/* 定义 /new-path 的路由 */}
  <Route path="/new-path" element={<NewPage />} />

  {/* ... 404 路由 ... */}
</Routes>

);
}
``
这里使用replace是个好的实践，这样用户点击后退不会回到/old-path(因为已经被/new-path替换了)，而是回到访问/old-path` 之前的页面。

在组件内部条件式重定向 (常用场景：登录/权限):

你可以根据组件的状态或用户权限，在组件内部渲染 Navigate 组件来实现条件式重定向。

“`jsx
import React from ‘react’;
import { Navigate } from ‘react-router-dom’;

function LoginPage({ isLoggedIn }) {
// 如果用户已登录，则重定向到仪表盘
if (isLoggedIn) {
// 渲染 Navigate 组件会触发重定向
return ;
}

// 如果用户未登录，则渲染登录表单
return (

);
}

export default LoginPage;
“`

请注意，Navigate 应该在需要重定向的条件下被渲染。它不是一个 Hook 或函数调用，而是一个组件。

11. 获取位置信息 (useLocation)

除了 useParams 获取 URL 参数外，有时候你需要获取当前的完整 URL 信息，包括路径名 (pathname)、查询字符串 (search)、哈希值 (hash) 以及通过 navigate 传递的状态 (state)。useLocation Hook 可以帮助你获取这些信息。

useLocation 返回一个 location 对象，包含以下常用属性：

• pathname: URL 的路径部分 (例如 /products/123)。
• search: URL 的查询字符串部分 (例如 ?sort=price&page=1)。
• hash: URL 的哈希部分 (例如 #section-details)。
• state: 通过 navigate 或 Link 的 state prop 传递过来的状态数据。

“`jsx
import React from ‘react’;
import { useLocation } from ‘react-router-dom’;

function CurrentPageInfo() {
const location = useLocation(); // 调用 Hook 获取 location 对象

// 解析查询字符串 (需要单独处理，可以使用 URLSearchParams)
const queryParams = new URLSearchParams(location.search);
const sortOrder = queryParams.get(‘sort’);
const pageNumber = queryParams.get(‘page’);

// 获取导航传递的状态
const passedState = location.state;

console.log(‘当前 Location 对象:’, location);
console.log(‘当前路径:’, location.pathname);
console.log(‘查询字符串:’, location.search);
console.log(‘哈希值:’, location.hash);
console.log(‘传递的状态:’, passedState);
console.log(‘查询参数 sort:’, sortOrder);
console.log(‘查询参数 page:’, pageNumber);

return (

);
}

export default CurrentPageInfo;
“`

useLocation 在很多场景下都有用，比如在组件加载时根据 URL 的查询参数进行数据过滤或排序，或者在登录成功后根据传递的状态显示欢迎消息。

12. 常用 Hooks 总结

React Router v6 提供了几个非常有用的 Hook，我们来快速回顾一下：

• useNavigate(): 返回一个函数，用于程序化导航（跳转、前进、后退）。
• useParams(): 返回一个对象，包含当前路由匹配到的 URL 参数。
• useLocation(): 返回一个对象，包含当前 URL 的位置信息 (pathname, search, hash, state)。
• useMatch(pattern): 返回一个对象，包含当前 URL 是否与给定的模式匹配的信息。如果匹配，会包含匹配的路径、参数等。如果需要检查某个特定路径是否当前活跃，NavLink 通常更方便，但 useMatch 可以在更复杂的场景下判断匹配性。

这些 Hook 只能在函数组件内部或自定义 Hook 内部使用，并且必须在被 <BrowserRouter> 或其他 Router 组件包裹的组件树中使用。

13. 常见问题与最佳实践

• 忘记包裹 BrowserRouter: 所有使用 React Router 功能的组件都必须是 <BrowserRouter> (或其他 Router) 的后代。如果你在组件中使用 useNavigate 或 Link 但组件树没有被 Router 包裹，你会看到错误。
• 将 <Routes> 放在 <BrowserRouter> 之外: Routes 必须是 Router 组件的直接或间接后代。
• 使用 <a> 标签进行内部导航: 再次强调，使用 Link 或 NavLink。
• 404 路由的位置: 通配符路由 (path="*") 必须放在 <Routes> 的最后，否则它会匹配所有路径，导致后面的路由永远无法被匹配。
• 相对路径 vs. 绝对路径:
  • Link 和 navigate 函数的 to 参数可以接受相对路径（不以 / 开头）或绝对路径（以 / 开头）。相对路径在构建嵌套路由时非常方便。
  • <Route> 的 path 在 v6 中通常是绝对匹配，但在嵌套路由中，子 Route 的 path 是相对于父级 path 的。
• 利用 replace prop 进行重定向: 在登录后跳转或处理旧 URL 重定向时，使用 replace 替换当前历史记录条目，可以优化用户体验，防止用户后退到不应该回到的页面。
• 组织路由配置: 当路由变得复杂时，可以将路由定义放在一个单独的文件中，而不是全部写在 App.js 中，提高可读性和维护性。
• 懒加载/代码分割: 对于大型应用，可以结合 React.lazy 和 Suspense 对路由组件进行代码分割，只在需要时加载组件的代码，优化应用加载速度。这涉及到更高级的话题，但 React Router 完全支持。

14. 从 v5 迁移到 v6 的变化 (简述)

如果你之前使用过 React Router v5，迁移到 v6 会注意到一些主要变化：

• Switch 变为 Routes: <Switch> 组件被 <Routes> 取代。<Routes> 的行为更直观，它会寻找最佳匹配而不是仅仅第一个匹配，但对于简单的路径，它仍会优先匹配更具体的路径。
• component, render, children 变为 element: <Route> 组件不再使用 component, render, children props 来指定渲染什么，而是统一使用 element prop，并且需要传递一个 JSX 元素（例如 element={<MyComponent />}）。
• useHistory 变为 useNavigate: useHistory Hook 被 useNavigate Hook 取代。useNavigate 返回一个函数，而不是 history 对象。
• 不再需要 exact: v6 的路径匹配更加智能，默认行为更接近 v5 带有 exact 的情况。对于父子路由，通过嵌套 <Route> 来定义关系。
• 嵌套路由的定义方式: v6 标准的嵌套路由定义方式是将子 <Route> 放在父 <Route> 内部。
• NavLink 的 activeClassName 和 activeStyle: 这些 props 被移除，现在通过 className 和 style props 接收函数来实现活跃状态的样式控制。
• Redirect 变为 Navigate: 组件 <Redirect> 被 <Navigate> 取代。

这些变化使得 v6 的 API 更加一致和简化。

结语

恭喜你！你已经详细了解了 React Router 在现代 React 应用中的核心用法。我们从客户端路由的必要性讲起，逐步深入到 React Router 的安装配置、核心组件 (BrowserRouter, Routes, Route)、导航方式 (Link, NavLink, useNavigate)、动态路由 (useParams)、嵌套路由 (Outlet)、错误处理 (404) 和重定向 (Navigate)，以及一些常用 Hook (useLocation) 和最佳实践。

React Router 是构建流畅、可维护的 React SPA 不可或缺的工具。掌握它，你就能轻松地管理应用的各个视图和它们之间的跳转逻辑。

路由是前端开发的基石之一。多动手实践，尝试在自己的项目中使用不同的功能，你将能更牢固地掌握这些知识。

如果你遇到了更复杂的路由场景（如路由守卫、数据加载等），React Router 也提供了相应的能力或模式来处理，但这些通常属于更高级的话题。对于绝大多数应用来说，本文涵盖的内容已经足够让你构建一个功能完善的导航系统。

现在，是时候在你的 React 项目中运用这些知识，构建令人惊叹的单页面应用了！

---