React Router6 路由实战：跳转、传参、嵌套与懒加载全解析

在单页应用开发中，路由不只是“切换页面”的工具，它决定了页面结构、数据流转和加载性能。很多开发者在刚开始使用 React Router6 时，往往只掌握了基础配置，一旦进入真实业务场景，就会遇到各种细节问题：为什么跳转后状态没了？为什么子路由不显示？为什么做了懒加载反而白屏？

这篇文章不重复基础概念，而是直接从工程实践出发，围绕 Router6 最常用的四个能力展开：页面跳转、参数传递、嵌套路由和懒加载。每一部分都会说明典型场景、常见错误以及推荐写法，帮助你把路由真正用稳。

一、页面跳转：声明式与命令式如何选择

在 React Router6 中，页面跳转主要有两种方式：声明式导航和命令式导航。

声明式导航使用 Link 或 NavLink 组件，适合用户主动点击的场景。例如：

import { Link, NavLink } from "react-router-dom";
<Link to="/dashboard">进入工作台</Link>
<NavLink
  to="/dashboard"
  className={({ isActive }) => (isActive ? "active" : "")}
>
  工作台
</NavLink>

NavLink 与 Link 的核心区别在于，前者可以获取当前路由是否处于激活状态，用于菜单高亮非常方便。

命令式导航则依赖 useNavigate，适合在事件回调、异步操作完成之后触发跳转。例如提交表单后跳转到结果页：

import { useNavigate } from "react-router-dom";
const navigate = useNavigate();
async function handleSubmit() {
  await saveForm();
  navigate("/success");
}

一个常见错误是：在类组件或普通工具函数中尝试直接调用 useNavigate，导致 Hook 规则报错。这种情况下，可以将跳转逻辑放在函数组件中触发，或者封装一个带有路由上下文的环境处理。

另一个容易被忽略的问题是“跳转后状态丢失”。React Router 本身不会主动保留页面内部状态，如果希望从列表页进入详情页后返回时保留滚动位置或筛选条件，可以使用 location.state 配合 navigate 传递，或者在页面卸载前进行状态持久化。

二、参数传递：三种方式各有用武之地

Router6 中，页面间传参主要有三种方式：路径参数、查询参数和路由状态。

1. 路径参数

适用于资源标识类信息，例如用户 ID、文章 ID。定义路由时使用动态段：

<Route path="/users/:userId" element={<UserDetail />} />

在目标页面中通过 useParams 获取：

import { useParams } from "react-router-dom";
const { userId } = useParams();

路径参数会直接体现在 URL 中，优点是刷新不丢失，适合需要可分享、可收藏的页面地址。

2. 查询参数

适合筛选条件、分页、排序等信息。通过 useSearchParams 读取和更新：

import { useSearchParams } from "react-router-dom";
const [searchParams, setSearchParams] = useSearchParams();
const page = searchParams.get("page") || "1";

更新查询参数时，建议基于当前参数进行合并，而不是整体覆盖，否则容易丢失已有条件：

setSearchParams((prev) => {
  prev.set("page", "2");
  return prev;
});

3. 路由状态

适合传递一些不适合暴露在 URL 中的临时数据，例如从列表页携带当前筛选摘要到详情页。使用 navigate 或 Link 的 state 字段：

navigate("/detail", { state: { from: "list", keyword: "react" } });

目标页面通过 useLocation 获取：

import { useLocation } from "react-router-dom";
const location = useLocation();
const { from, keyword } = location.state || {};

需要注意，路由状态在刷新后可能丢失，因此不能作为唯一的数据来源。如果数据必须长期可用，应优先考虑路径参数或查询参数。

三、嵌套路由：结构清晰是渲染的前提

嵌套路由用于表达“页面中包含子页面”的结构，例如后台管理系统中，外层是布局框架，内层是具体功能页。

Router6 推荐使用相对路径定义子路由：

<Route path="/admin" element={<AdminLayout />}>
  <Route index element={<AdminHome />} />
  <Route path="users" element={<UserList />} />
  <Route path="settings" element={<Settings />} />
</Route>

父路由组件中通过 Outlet 指定子路由渲染位置：

import { Outlet } from "react-router-dom";
export default function AdminLayout() {
  return (
    <div className="admin-layout">
      <aside>侧边导航</aside>
      <main>
        <Outlet />
      </main>
    </div>
  );
}

很多开发遇到“嵌套路由不渲染”的问题，通常有两个原因：

1. 父路由组件中忘记放置 Outlet，导致子组件没有挂载位置；
2. 子路由路径使用了绝对路径，与父路由匹配规则不一致。Router6 中子路由路径如果以 / 开头，会被视为从根路由开始匹配，容易造成匹配失败。

因此，在子路由中建议使用相对路径，让路由结构更清晰，也便于迁移和重组。

index 路由用于访问父路径时默认展示的内容，避免进入 /admin 时出现空白区域。

四、懒加载：按需加载与白屏控制

随着应用变大，首屏加载时间会明显增加。懒加载可以让路由对应的组件在访问时才加载，从而减少初始包体积。

Router6 中通常通过 React.lazy 配合动态导入实现：

import { lazy, Suspense } from "react";
import { Routes, Route } from "react-router-dom";
const Dashboard = lazy(() => import("./pages/Dashboard"));
const Settings = lazy(() => import("./pages/Settings"));
function App() {
  return (
    <Suspense fallback={<div>加载中...</div>}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Suspense>
  );
}

懒加载白屏通常不是因为组件加载失败，而是缺少 Suspense 或 fallback 设置不合理。当组件处于加载状态时，React 需要知道展示什么内容。如果没有 Suspense，会直接抛出错误或导致页面空白。

为了提高体验，建议：

• fallback 中放置轻量级的加载占位，而不是空节点；
• 对首屏关键路由谨慎使用懒加载，避免进入应用后仍需等待；
• 可以结合错误边界处理动态导入失败的情况，避免因网络波动导致整页不可用。

另外，如果项目使用了路由级代码分割，建议将共享依赖合理分组，避免不同路由重复加载相似代码，影响加载效率。

五、实践建议：让路由设计更稳定

在实际项目中，路由配置容易随着业务增长而变得混乱。建议从一开始就采用集中式配置的思想，将路由结构、权限信息、页面标题等统一管理。这样不仅方便维护，也更有利于后续接入监控、埋点和权限控制。

同时，路由设计应优先考虑 URL 的可读性和可分享性。对于需要长期保存或分享的页面，尽量将关键信息放在路径参数或查询参数中；对于临时交互状态，可以使用路由状态或组件内部状态管理。

跳转、传参、嵌套和懒加载并不是彼此独立的功能，它们共同构成了单页应用的路由体系。理解它们之间的配合方式，才能在复杂业务中快速定位问题并给出可靠方案。