React Router 2025 完全指南：从入门到实践

React Router 是 React 应用的标准路由库。它使你能够构建单页应用（SPA），无需完整页面重载即可实现导航。React Router 通过根据 URL 渲染不同的组件来更新 UI，同时使用 History API 保持浏览器历史同步。

通过 React Router，用户可以收藏页面、刷新 URL，并使用浏览器的前进后退按钮，而开发者可以清晰地将 URL 映射到特定组件。

为什么要使用 React Router？

React Router 通过提供声明式和灵活的路由系统解决了 React 应用中的导航问题。它允许你：

将 URL 映射到组件
使用 Link 或 useNavigate 实现无刷新页面导航
使用 useParams 读取动态 URL 参数，如 /products/:id
使用 useSearchParams 处理查询字符串
使用 Outlet 构建嵌套路由和共享布局
使用认证逻辑保护路由
懒加载页面以提升性能

核心组件与 Hooks（v6+）

React Router 的核心包含以下几个重要的构建模块：

组件/Hook	用途
`BrowserRouter`	最常用的 Web 应用路由；使用 HTML5 History API
`Routes` & `Route`	定义路径到组件的映射
`Link` & `NavLink`	创建无刷新导航链接（NavLink 支持激活样式）
`useNavigate`	程序化导航
`useParams`	读取动态路由参数
`useLocation`	访问当前 URL 对象
`useSearchParams`	管理查询字符串
`Outlet`	在布局组件中渲染子路由

示例 1：基础设置

首先，安装库并用 BrowserRouter 包裹你的应用：

bash

npm install react-router-dom

jsx

import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

createRoot(document.getElementById("root")).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

这将在整个应用中启用路由功能。

示例 2：嵌套路由与布局

嵌套路由让你可以在多个页面间共享布局：

jsx

import { Routes, Route, NavLink, Outlet } from "react-router-dom";

function Layout() {
  return (
    <div>
      <nav>
        <NavLink to="/">Home</NavLink> |{" "}
        <NavLink to="/products">Products</NavLink>
      </nav>
      <Outlet />
    </div>
  );
}

function Home() {
  return <h2>Welcome to our store</h2>;
}

function Products() {
  return <h2>Our Products</h2>;
}

export default function App() {
  return (
    <Routes>
      <Route element={<Layout />}>
        <Route path="/" element={<Home />} />
        <Route path="/products" element={<Products />} />
      </Route>
    </Routes>
  );
}

这里 Layout 是共享的，Outlet 渲染匹配的子路由。

示例 3：带参数的动态路由

动态路由在渲染数据驱动页面时非常有用：

jsx

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

function ProductDetail() {
  const { id } = useParams();
  return <h2>Product ID: {id}</h2>;
}

现在访问 /products/42 将渲染 Product ID: 42。

示例 4：受保护的路由

你可以基于认证或权限来保护路由：

jsx

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

function ProtectedRoute({ children }) {
  const isAuthenticated = false; // 替换为真实的认证逻辑
  return isAuthenticated ? children : <Navigate to="/login" />;
}

用 ProtectedRoute 包裹敏感页面以限制访问。

示例 5：页面懒加载

懒加载有助于减少初始包大小并提升性能：

jsx

import React, { lazy, Suspense } from "react";

const ProductDetail = lazy(() => import("./ProductDetail"));

function App() {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <ProductDetail />
    </Suspense>
  );
}

ProductDetail 页面仅在需要时加载。

最佳实践

需要激活链接样式时使用 NavLink
按逻辑组织路由，例如将与仪表板相关的页面分组在 /dashboard 下
懒加载路由以提升性能
始终使用通配符（*）处理未知路由作为 404 页面
将认证和授权逻辑与路由定义分离，以保持代码整洁

总结

React Router 是构建现代、快速、用户友好的 React 应用的必备工具。通过掌握嵌套布局、动态参数、受保护路由和懒加载等路由概念，你可以创建流畅、直观、接近原生应用体验的单页应用。