第三章：React 进阶

路由管理 (React Router)

1. React Router 简介

React Router 是 React 生态中最流行的路由管理库，用于构建单页应用（SPA）中的页面导航。它允许开发者通过声明式的方式管理应用的路由，实现动态加载组件、嵌套路由、路由参数传递等功能。

2. 核心组件

React Router 提供以下核心组件：

  • <BrowserRouter>：基于 HTML5 History API 的路由器，适用于现代浏览器。
  • <Route>：定义路由规则，匹配 URL 并渲染对应的组件。
  • <Link> 和 <NavLink>：用于导航的链接组件，避免页面刷新。
  • <Switch>（v5）或 <Routes>（v6）：包裹多个 <Route>，确保仅渲染第一个匹配的路由。
  • <Redirect>（v5）或 <Navigate>（v6）：用于重定向到其他路由。

3. 基本路由配置

以下是一个简单的路由配置示例（React Router v6）：

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

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

4. 动态路由和参数

React Router 支持动态路由参数，例如：

<Route path="/users/:id" element={<UserProfile />} />

在组件中可以通过 useParams 钩子获取参数：

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

function UserProfile() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}

5. 嵌套路由

嵌套路由允许在父路由下定义子路由，例如：

<Route path="/dashboard" element={<Dashboard />}>
  <Route path="profile" element={<Profile />} />
  <Route path="settings" element={<Settings />} />
</Route>

父组件中需要使用 <Outlet /> 渲染子路由：

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet /> {/* 子路由在此渲染 */}
    </div>
  );
}

6. 编程式导航

通过 useNavigate 钩子实现编程式导航：

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

function LoginButton() {
  const navigate = useNavigate();
  return (
    <button onClick={() => navigate('/dashboard')}>
      Login
    </button>
  );
}

7. 路由守卫

可以通过高阶组件或自定义逻辑实现路由守卫（如登录验证）：

function PrivateRoute({ children }) {
  const isAuthenticated = checkAuth(); // 自定义验证逻辑
  return isAuthenticated ? children : <Navigate to="/login" />;
}

// 使用示例
<Route path="/admin" element={<PrivateRoute><AdminPanel /></PrivateRoute>} />

8. 常见问题与优化

  • 404 页面：通过 path="*" 捕获未匹配的路由。
  • 懒加载：结合 React.lazy 和 Suspense 实现按需加载路由组件。
  • 滚动恢复：使用 <ScrollRestoration />（v6）自动恢复滚动位置。

总结

React Router 是构建 React 单页应用的核心工具，通过灵活的路由配置和丰富的 API，可以轻松实现复杂的导航逻辑。建议结合官方文档（reactrouter.com）深入学习高级用法。

Last Updated::