React Router 路由速查表 - React Router v6 路由配置与导航大全
这张速查给在 React 应用里做客户端导航的开发者，用的是 React Router v6。内容涵盖 Routes/Route 的声明式路由树、用 Outlet 实现的嵌套布局、Link/NavLink 与 useNavigate 编程式导航、动态参数 :id 与查询字符串的读写、受保护页面的登录守卫，以及 v6.4 新增的 loader/action 数据加载与提交 API。每条都对应一个具体缺口，比如渲染 404、保持导航高亮或登录后重定向。读完你应能声明一棵路由树、在页面间跳转、处理 :id 与 ?query，并给需要登录的页面加守卫。
路由配置 5
<BrowserRouter><App /></BrowserRouter>用 history API 包裹整个应用，启用前端路由
<Routes><Route path="/" element={<Home />} /></Routes>声明路由规则：path 匹配时渲染对应 element
<Route path="/users/:id" element={<User />} />动态路由参数，:id 会被 URL 中对应段捕获
<Route path="*" element={<NotFound />} />没匹配到任何路由时的 404 兜底页
<Route path="/" element={<Layout />}>...</Route>根路由挂布局，子路由渲染进子 Outlet
导航 5
<Link to="/about">About</Link>声明式导航，渲染成 <a>，点击进行客户端跳转
<NavLink to="/users" className={({ isActive }) => isActive ? "active" : ""}>激活状态样式
<Navigate to="/login" replace />重定向
const navigate = useNavigate()获取导航函数
navigate("/dashboard", { replace: true, state: { from: "/" } })编程式跳转（替换+携带 state）
路由参数 5
<Route path="/users/:id" element={<User />} />声明动态参数
const { id } = useParams()获取动态参数对象
<Route path="/files/*" element={<Files />} />匹配多段路径（splat）
const splat = useParams()["*"]获取 splat 段
navigate(-1) / navigate(1)后退 / 前进一页
查询参数 5
const [params, setParams] = useSearchParams()读写查询参数
params.get("q")读取单个查询参数
setParams({ q: "keyword", page: 1 })更新查询参数
<Link to="/search?q=react">Search</Link>带查询字符串的链接
params.toString()序列化为查询字符串
嵌套与布局 5
<Route path="/dashboard" element={<Dashboard />}>父路由
<Route index element={<Overview />} />默认子路由（index 路由）
<Route path="settings" element={<Settings />} />相对路径子路由
<Outlet />在父组件渲染子路由
<Outlet context={{ user }} />向子路由传递 context
路由守卫与数据 5
function ProtectedRoute({ children }) { return isAuth ? children : <Navigate to="/login" /> }自定义保护路由组件
<Route element={<ProtectedRoute><Outlet /></ProtectedRoute>}>包裹多个受保护路由
<Route loader={async ({ params }) => fetchUser(params.id)} />数据加载（v6.4+）
<Route action={async ({ request }) => submitForm(request)} />数据提交（v6.4+）
<Route errorElement={<ErrorBoundary />} />路由级错误边界
高级用法 6
const location = useLocation()获取 location 对象
location.pathname / location.search / location.hash解析当前 URL 各部分
const match = useMatch("/users/:id")匹配路径模式
const Page = lazy(() => import("./Page"))懒加载组件
<Route path="about" element={<Suspense><About /></Suspense>} />路由级懒加载
<ScrollRestoration />滚动位置恢复（v6.4+）
提示
- React Router v6 用 <Routes> 替代了 v5 的 <Switch>。
- useNavigate 替代了 v5 的 useHistory，navigate(-1) 后退，navigate(1) 前进。
- 嵌套路由需在父组件用 <Outlet /> 渲染子路由，index 路由匹配父路径本身。
- NavLink 的 className 可接收 { isActive } 回调实现激活样式。
- 动态参数 :id 用 useParams() 获取，查询参数 ?q= 用 useSearchParams() 读写。
由 巧匠 维护
公开更新于 2026年7月21日，内容持续校对官方文档。