React Router Cheatsheet - Routing
React Router v6 路由开发必备 API 都在这里了，从路由配置到嵌套布局，按类别分类整理，写代码时直接复制。
Back to Languages路由配置 5
<BrowserRouter><App /></BrowserRouter>包裹应用启用路由
<Routes><Route path="/" element={<Home />} /></Routes>声明路由规则
<Route path="/users/:id" element={<User />} />动态路由参数
<Route path="*" element={<NotFound />} />404 兜底路由
<Route path="/" element={<Layout />}>...</Route>带布局的根路由
导航 5
<Link to="/about">About</Link>声明式导航
<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+）
💡 Tips
- React Router v6 用 <Routes> 替代了 v5 的 <Switch>。
- useNavigate 替代了 v5 的 useHistory，navigate(-1) 后退，navigate(1) 前进。
- 嵌套路由需在父组件用 <Outlet /> 渲染子路由，index 路由匹配父路径本身。
- NavLink 的 className 可接收 { isActive } 回调实现激活样式。
- 动态参数 :id 用 useParams() 获取，查询参数 ?q= 用 useSearchParams() 读写。