React 路由问题：路由配置与导航

React Router 是 React 生态中最流行的路由解决方案，用于管理单页应用（SPA）的页面跳转与 URL 映射。本指南将基于 React Router v6 版本，演示如何从零开始配置路由并实现页面导航。

一、 环境准备与基础配置

在开始配置路由之前，必须确保项目依赖安装正确，并在入口文件中挂载路由容器。

1. 打开 终端窗口，确保处于项目根目录。

2. 执行 以下命令安装 react-router-dom 库：

   npm install react-router-dom

3. 打开 项目入口文件 src/index.js（或 src/main.jsx）。

4. 导入 BrowserRouter 组件，并使用它包裹根组件 <App />。这一步让整个应用具备路由能力。

   import React from 'react';
   import ReactDOM from 'react-dom';
   import { BrowserRouter } from 'react-router-dom';
   import App from './App';
   
   ReactDOM.render(
     <BrowserRouter>
       <App />
     </BrowserRouter>,
     document.getElementById('root')
   );

二、 定义路由映射表

路由映射表决定了 URL 路径与组件的对应关系。推荐使用 Routes 和 Route 组件来构建清晰的映射结构。

1. 创建 两个简单的页面组件文件：src/pages/Home.jsx 和 src/pages/About.jsx。

2. 打开 src/App.jsx 文件。

3. 导入 Routes 和 Route 组件，以及上一步创建的页面组件。

   import { Routes, Route } from 'react-router-dom';
   import Home from './pages/Home';
   import About from './pages/About';

4. 编写 路由配置结构。使用 <Routes> 包裹所有的 <Route>，其中 path 属性定义 URL 路径，element 属性指定要渲染的组件。

   function App() {
     return (
       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/about" element={<About />} />
       </Routes>
     );
   }

此时，访问根路径 / 会渲染 Home 组件，访问 /about 会渲染 About 组件。

三、 实现页面导航

在单页应用中，禁止使用传统的 <a> 标签跳转，因为这会导致页面整体刷新，丢失 React 的状态。应使用 Link 组件或 useNavigate 钩子。

方法一：声明式导航

适用于导航栏、菜单等直接点击跳转的场景。

1. 导入 Link 组件。

   import { Link } from 'react-router-dom';

2. 使用 Link 组件替换 <a> 标签。将目标路径赋值给 to 属性。

   <nav>
     <Link to="/">首页</Link>
     <Link to="/about">关于我们</Link>
   </nav>

方法二：编程式导航

适用于表单提交成功后跳转、登录拦截后跳转等需要逻辑判断的场景。

1. 打开 需要跳转逻辑的组件文件（如 Login.jsx）。

2. 导入 useNavigate 钩子。

   import { useNavigate } from 'react-router-dom';

3. 调用 useNavigate 获取 navigate 函数。

   const navigate = useNavigate();

4. 在 事件处理函数中 调用 navigate 函数，传入目标路径。

   const handleLogin = () => {
     // 执行登录逻辑...
     // 登录成功后跳转
     navigate('/dashboard');
   };

导航方式对比

四、 处理动态路由参数

当需要根据不同的 ID 展示不同内容（如商品详情页 /product/123）时，需要配置动态路由并获取参数。

1. 修改 App.jsx 中的路由配置，在 path 中使用冒号 : 定义参数名。

   <Route path="/product/:id" element={<ProductDetail />} />

2. 打开 目标组件 ProductDetail.jsx。

3. 导入 useParams 钩子。

   import { useParams } from 'react-router-dom';

4. 调用 useParams 获取参数对象。

   function ProductDetail() {
     const params = useParams();
     return <div>当前商品 ID: {params.id}</div>;
   }

五、 配置嵌套路由（子路由）

当页面存在公共布局（如侧边栏、顶部导航），仅内部内容区域变化时，使用嵌套路由。

1. 创建 一个布局组件 Layout.jsx，用于包裹公共部分。

2. 在 布局组件中，使用 Outlet 组件作为子组件的渲染占位符。

   import { Outlet } from 'react-router-dom';
   
   function Layout() {
     return (
       <div>
         <header>公共头部</header>
         <main>
           <Outlet /> {/* 子路由将在这里渲染 */}
         </main>
       </div>
     );
   }

3. 修改 App.jsx 中的路由配置。将父路由的 element 设为布局组件，并在父路由内部嵌套子路由。

   <Routes>
     <Route path="/" element={<Layout />}>
       <Route index element={<Home />} /> {/* index 表示默认子路由 */}
       <Route path="about" element={<About />} />
       <Route path="product/:id" element={<ProductDetail />} />
     </Route>
   </Routes>

此时，访问 /about 时，页面结构为：Layout 组件（包含头部） + About 组件（位于 Outlet 位置）。

六、 处理 404 页面

当用户访问不存在的路径时，需要显示友好的 404 提示。

1. 创建 一个 NotFound.jsx 组件。

2. 在 App.jsx 的 Routes 最末尾，添加 一个使用通配符 * 的路由。

   <Routes>
     {/* 其他路由... */}
     <Route path="*" element={<NotFound />} />
   </Routes>

* 通配符会匹配所有未被上方具体路由捕获的路径，自动渲染 NotFound 组件。