React Router 路由速查表
React Router 是 React 标准路由库，整理 v6 版本核心 API 和常用模式。
返回 编程语言路由配置 4
<BrowserRouter><App /></BrowserRouter>包裹应用启用路由
<Routes><Route path="/" element={<Home />} /></Routes>定义路由规则
<Route path="/users/:id" element={<User />} />动态路由参数
<Route path="*" element={<NotFound />} />404 兜底路由
导航链接 3
<Link to="/about">About</Link>声明式导航
<NavLink to="/users" className={({isActive}) => isActive ? "active" : ""}>激活状态样式
<Navigate to="/login" replace />编程式重定向
Hooks 6
useNavigate()获取导航函数
navigate("/dashboard")跳转到指定路径
navigate(-1)后退一页
useParams()获取路由参数 { id: "123" }
useLocation()获取当前 location 对象
useSearchParams()获取查询参数 ?q=keyword
嵌套路由 4
<Route path="/dashboard" element={<Dashboard />}>父路由
<Route index element={<Overview />} />默认子路由
<Route path="settings" element={<Settings />} />嵌套子路由
<Outlet />在父组件渲染子路由
路由守卫 2
function ProtectedRoute({ children }) { return isAuth ? children : <Navigate to="/login" /> }自定义保护路由组件
<Route path="/dashboard" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />应用路由守卫
💡 提示
- React Router v6 用 Routes 替代了 v5 的 Switch。
- useNavigate 替代了 v5 的 useHistory。
- 嵌套路由需要在父组件用 <Outlet /> 渲染子路由。
- NavLink 可以访问 isActive 判断是否激活，用于样式。
- 动态参数 :id 用 useParams 获取，查询参数 ?q= 用 useSearchParams。