React 路由

React 路由是 React 应用中实现页面导航和组件动态渲染的核心工具，主要通过 react-router 库实现（通常使用 react-router-dom 进行 Web 开发）。以下是对 React 路由的中文讲解，涵盖核心概念、基本使用和常见场景，尽量简洁清晰。

---

1. 什么是 React 路由？

React 路由允许在单页应用（SPA）中根据 URL 动态渲染不同的组件，而无需实际刷新页面。它通过监听浏览器 URL 变化，匹配对应的组件并渲染，实现类似多页应用的导航体验。

---

2. 核心库：react-router-dom

react-router-dom 是 React 路由的 Web 版本，提供以下关键组件：

• BrowserRouter：基于 HTML5 history API 的路由容器，推荐用于现代浏览器。
• Routes 和 Route：定义路由规则，匹配 URL 和组件。
• Link 和 NavLink：用于创建导航链接，避免页面刷新。
• useNavigate：编程式导航的 Hook，用于跳转。
• Outlet：用于渲染嵌套路由的子组件。

---

3. 安装

首先安装 react-router-dom：

npm install react-router-dom

---

4. 基本使用

以下是一个简单的 React 路由示例：

示例代码

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

// 页面组件
function Home() {
  return <h2>首页</h2>;
}
function About() {
  return <h2>关于我们</h2>;
}
function NotFound() {
  return <h2>404 - 页面不存在</h2>;
}

// 主应用
function App() {
  return (
    <BrowserRouter>
      {/* 导航链接 */}
      <nav>
        <Link to="/">首页</Link> | <Link to="/about">关于</Link>
      </nav>

      {/* 路由配置 */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} /> {/* 404 路由 */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;

说明

• <BrowserRouter>：包裹整个应用，提供路由上下文。
• <Link>：生成导航链接，点击后改变 URL 但不刷新页面。
• <Routes> 和 <Route>：定义路径和对应组件，path="*" 匹配未定义路由（404）。
• 访问 / 渲染 Home，访问 /about 渲染 About。

---

5. 动态路由

React 路由支持动态路径参数，例如 /users/:id。

示例

function User() {
  const { id } = useParams(); // 获取 URL 参数
  return <h2>用户 ID: {id}</h2>;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/users/:id" element={<User />} />
      </Routes>
    </BrowserRouter>
  );
}

• useParams Hook：获取动态参数，如 /users/123 中的 id 为 123。

---

6. 编程式导航

使用 useNavigate Hook 实现代码控制的页面跳转。

示例

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

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

  const handleLogin = () => {
    // 假设登录成功
    navigate('/dashboard'); // 跳转到仪表盘
  };

  return <button onClick={handleLogin}>登录</button>;
}

---

7. 嵌套路由

嵌套路由允许在父组件中渲染子路由，使用 <Outlet> 占位。

示例

function Dashboard() {
  return (
    <div>
      <h2>仪表盘</h2>
      <nav>
        <Link to="profile">个人资料</Link> | <Link to="settings">设置</Link>
      </nav>
      <Outlet /> {/* 子路由渲染位置 */}
    </div>
  );
}

function Profile() {
  return <h3>个人资料页面</h3>;
}

function Settings() {
  return <h3>设置页面</h3>;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />}>
          <Route path="profile" element={<Profile />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

• 访问 /dashboard/profile 时，Dashboard 渲染并在 <Outlet> 位置显示 Profile。

---

8. 路由守卫

实现权限控制或重定向，常用 Navigate 组件或 useNavigate。

示例：简单权限控制

function PrivateRoute({ children }) {
  const isAuthenticated = false; // 模拟未登录
  return isAuthenticated ? children : <Navigate to="/login" />;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route
          path="/dashboard"
          element={
            <PrivateRoute>
              <Dashboard />
            </PrivateRoute>
          }
        />
        <Route path="/login" element={<Login />} />
      </Routes>
    </BrowserRouter>
  );
}

• 未登录用户访问 /dashboard 会重定向到 /login。

---

9. 常见问题

1. 如何处理 404 页面？
   使用 <Route path="*" element={<NotFound />} /> 捕获未匹配的路由。
2. 如何传递参数给路由？
   使用动态路由（如 :id）或查询参数（如 ?key=value），通过 useParams 或 useSearchParams 获取。
3. 如何实现路由动画？
   使用第三方库如 framer-motion，结合路由切换添加过渡效果。

---

10. 进阶：懒加载路由

为优化性能，可使用 React 的 lazy 和 Suspense 实现路由懒加载。

示例

import { lazy, Suspense } from 'react';

const Home = lazy(() => import('./Home'));

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>加载中...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

---

11. 注意事项

• 版本兼容：本文基于 react-router-dom v6，v5 和 v6 API 差异较大，注意版本。
• 性能优化：避免嵌套路由过深，使用懒加载减少初始加载时间。
• SEO：单页应用需配合服务器端渲染（如 Next.js）优化搜索引擎抓取。

---

12. 资源

• 官方文档：https://reactrouter.com/
• 中文社区资源：搜索 “React Router 中文教程” 或参考掘金、知乎等平台文章。