React 路由：React Router 配置与导航

React Router 是 React 生态中用于处理客户端路由的标准库，它允许你在不刷新页面的情况下，根据 URL 地址切换视图组件。以下指南将详细介绍如何从零开始配置 React Router（以目前主流的 v6 版本为例）并实现各种导航功能。

第一阶段：安装与基础配置

在开始编码之前，必须先将 React Router 库集成到项目中。

1. 打开终端，进入你的 React 项目根目录。
2. 运行以下命令 安装 react-router-dom 库：

npm install react-router-dom

3. 打开项目的入口文件（通常是 src/main.jsx 或 src/index.js）。
4. 导入 BrowserRouter 组件，并使用它 包裹 你的根组件（通常是 App）。这一步启用了整个应用的路由功能，使得路由上下文在所有组件中可用。

// src/main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

第二阶段：定义路由表

路由表决定了 URL 路径与 React 组件之间的对应关系。

1. 打开 src/App.jsx 文件。
2. 创建几个简单的页面组件用于测试（例如 Home, About, Contact）。

const Home = () => <h1>首页</h1>;
const About = () => <h1>关于我们</h1>;
const Contact = () => <h1>联系方式</h1>;

3. 导入 Routes 和 Route 组件。
4. 使用 Routes 组件作为路由匹配的容器，在其中 添加 多个 Route 组件。
5. 配置 每个 Route 的 path（路径）和 element（要渲染的组件）属性。

// src/App.jsx
import { Routes, Route } from 'react-router-dom';

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

export default App;

此时，浏览器访问 /、/about 或 /contact 将分别显示对应的组件内容。

第三阶段：实现导航跳转

React Router 提供了多种方式在页面间进行跳转，主要分为声明式导航和编程式导航。

1. 声明式导航（使用 Link 组件）

Link 组件类似于 HTML 的 <a> 标签，但它会阻止浏览器默认的重新加载行为，转而通过 JavaScript 切换 URL。

1. 导入 Link 组件。
2. 替换 原有的 <a> 标签，使用 to 属性指定跳转目标。

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

// 在组件中
<nav>
  <ul>
    <li><Link to="/">首页</Link></li>
    <li><Link to="/about">关于我们</Link></li>
    <li><Link to="/contact">联系方式</Link></li>
  </ul>
</nav>

如果需要高亮显示当前激活的链接（例如导航栏选中态），请 使用 NavLink 组件替代 Link。NavLink 允许你通过 className 或 style 属性接收一个函数，该函数包含 isActive 状态。

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

<NavLink
  to="/about"
  className={({ isActive }) => isActive ? "active-link" : ""}
>
  关于我们
</NavLink>

2. 编程式导航（使用 useNavigate Hook）

当需要在逻辑处理（如表单提交成功后、点击按钮后）中进行跳转时，需要使用编程式导航。

1. 导入 useNavigate Hook。
2. 调用 useNavigate() 获取 navigate 函数。
3. 执行 navigate(路径) 进行跳转。

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

function LoginButton() {
  const navigate = useNavigate();

  const handleClick = () => {
    // 执行登录逻辑...
    // 登录成功后跳转到首页
    navigate('/');
  };

  return <button onClick={handleClick}>登录并跳转</button>;
}

第四阶段：动态路由与参数传递

在实际应用中，经常需要处理带有参数的 URL，例如 /user/123 这样的用户详情页。

1. 配置 路由路径时，使用 冒号 : 定义参数段。

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

2. 在目标组件（UserProfile）中，导入 useParams Hook。
3. 调用 useParams() 获取 URL 中的参数对象，并 解构 出所需的变量。

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

function UserProfile() {
  const { userId } = useParams();

  return (
    <div>
      <h1>用户 ID: {userId}</h1>
      {/* 这里可以根据 userId 获取用户详情 */}
    </div>
  );
}

除了 useParams 获取路径参数外，你还可以在 navigate 函数或 Link 组件中传递查询字符串或状态对象。

• 传递查询字符串：navigate('/search?keyword=react')
• 接收查询字符串：导入 useLocation Hook，并 使用 new URLSearchParams(location.search) 进行解析。

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

function SearchResults() {
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const keyword = searchParams.get('keyword');

  return <div>搜索关键词: {keyword}</div>;
}

第五阶段：嵌套路由与布局

嵌套路由允许你在父路由中渲染子路由，常用于带有侧边栏或头部导航的复杂布局。

1. 创建一个父级组件（如 Dashboard），并在其中 添加 <Outlet /> 组件。<Outlet /> 标识了子路由内容将渲染的位置。

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

function Dashboard() {
  return (
    <div>
      <h1>后台管理系统</h1>
      <nav>
        <Link to="/dashboard/overview">概览</Link>
        <Link to="/dashboard/settings">设置</Link>
      </nav>
      <hr />
      {/* 子组件将渲染在这里 */}
      <Outlet />
    </div>
  );
}

2. 配置 路由表时，将子路由 嵌套 在父路由的 Route 组件内部。

<Route path="/dashboard" element={<Dashboard />}>
  <Route path="overview" element={<Overview />} />
  <Route path="settings" element={<Settings />} />
</Route>

注意：嵌套路由的 path 属性不需要以 / 开头（相对路径），且默认情况下访问 /dashboard 会渲染 Dashboard 组件，但不会渲染任何子组件。如果希望访问父路由时自动重定向到某个子路由，使用 Navigate 组件。

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

// ... 在嵌套路由中添加索引路由或重定向
<Route index element={<Navigate to="/dashboard/overview" replace />} />

第六阶段：404 页面处理与路由通配符

当用户访问一个不存在的路径时，应该显示一个友好的 404 页面。

1. 创建一个 NotFound 组件。
2. 放置一个 path="*" 的路由，并将其 置于 路由表的 最底部。* 是通配符，匹配所有之前未匹配到的路径。

const NotFound = () => <h1>404 - 页面未找到</h1>;

// ... 在 Routes 内部最后添加
<Route path="*" element={<NotFound />} />

常见问题对照表

下表总结了路由配置中容易混淆的概念和组件。

通过以上步骤，你已经掌握了 React Router 的核心配置、导航、参数传递及嵌套路由的实现方法，足以应对绝大多数单页应用（SPA）的路由开发需求。