ZhenYu's 知识库

外观

React Router

约 613 字大约 2 分钟

reactrouter

2026年04月08日

React Router 解决的是“URL 与界面状态同步”的问题。路由不是页面跳转插件，而是应用信息架构的一部分。

路由的核心心智模型

  • URL 描述当前页面状态
  • 路由树映射布局树
  • 参数、查询、路径片段共同决定页面内容
  • 页面切换本质上是组件树切换

现代 React Router 的核心 API

  • createBrowserRouter / RouterProvider
  • Routes / Route
  • Outlet
  • Link / NavLink
  • Navigate
  • useNavigate
  • useParams
  • useLocation

嵌套路由的关键是 Outlet：

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

export default function DashboardLayout() {
    return (
        <section>
            <aside>menu</aside>
            <main>
                <Outlet />
            </main>
        </section>
    );
}

动态路由与嵌套路由

典型场景：

  • /users/:id
  • /products/:productId/reviews/:reviewId
  • /settings/profile
  • /settings/security

设计时优先先画路由树，再写组件树。布局稳定、内容变化的场景，优先使用嵌套路由。

路由传参与跳转

  • 路径参数：useParams()
  • 查询参数：useSearchParams()
  • 编程式跳转：useNavigate()
  • 重定向：<Navigate to="/login" replace />

对于列表页到详情页：

  • 资源 ID 放在路径参数里
  • 筛选条件、排序条件放在 query 里
  • 不要把核心页面状态完全藏在内存状态中

路由懒加载与代码分割

大路由模块适合按页面维度拆包：

import {lazy, Suspense} from 'react';

const UserPage = lazy(() => import('./pages/UserPage'));

配合 Suspense 可以让首屏包更小，减少首次加载压力。

权限路由

受保护路由的关键不是“拦截跳转”，而是基于认证状态决定渲染结果。

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

export function ProtectedRoute({authed, children}: {
    authed: boolean;
    children: React.ReactNode;
}) {
    return authed ? children : <Navigate to="/login" replace />;
}

常见分层：

  • 路由层：决定页面是否可进入
  • 请求层：处理 token、刷新、权限错误
  • 组件层：按角色控制按钮、菜单、字段可见性

从 React Router 4/5 到 6 的理解

知识架构里提到的 Route、Switch、Prompt、Redirect 属于旧版本常见概念。现代项目更常见的是：

  • Switch -> Routes
  • Redirect -> Navigate
  • 更强调路由对象和嵌套结构

理解旧版有助于读历史项目，但新项目应优先采用 v6 的心智模型。

实践建议

  • 先定义路由树，再落页面目录
  • 布局路由和业务页面路由分离
  • 权限不要只做前端判断
  • 懒加载按页面边界切，不要过度切碎
  • 让 URL 真正表达页面状态，便于分享、刷新和回放