React Router 路由
React 本身不带路由，单页应用的路由由 react-router-dom 实现。Vite 项目推荐数据路由写法：createBrowserRouter(routes) 配置路由表，<RouterProvider router={router} /> 挂载；<Outlet /> 是子路由的"占位"。
核心组件：<Link to="/about"> 做声明式跳转（不刷新页面），useNavigate() 做编程式跳转，useParams() 取动态参数（/user/:id），useSearchParams() 取查询参数（?kw=x）。
- createBrowserRouter 配路由表 + RouterProvider 挂载（Vite 推荐）
- Link 声明跳转 / useNavigate 编程跳转 / useParams 取动态参数
是嵌套子路由的渲染占位
Router
// src/main.jsx —— 数据路由写法（react-router-dom v6.4+） import { createBrowserRouter, RouterProvider } from 'react-router-dom'; import Layout from './Layout'; import Home from './pages/Home'; import User from './pages/User'; import NotFound from './pages/NotFound'; const router = createBrowserRouter([ { path: '/', element: <Layout />, // 布局组件，内部有 <Outlet/> children: [ // 子路由渲染到 Outlet 位置 { index: true, element: <Home /> }, { path: 'user/:id', element: <User /> }, { path: '*', element: <NotFound /> }, // 兜底 404 ], }, ]); createRoot(document.getElementById('root')).render(<RouterProvider router={router} />); // src/pages/User.jsx —— 取参数与编程式跳转 import { useParams, useNavigate, Link } from 'react-router-dom'; import { useEffect, useState } from 'react'; function User() { const { id } = useParams(); // /user/42 -> id='42' const navigate = useNavigate(); const [user, setUser] = useState(null); useEffect(() => { fetch('/api/users/' + id).then(r => r.json()).then(setUser); }, [id]); if (!user) return <p>加载中…</p>; return ( <div> <h1>{user.name}（#{id}）</h1> <Link to="/">回首页</Link> <button onClick={() => navigate('/user/' + (Number(id) + 1))}>下一位</button> </div> ); }
本节要点react-router-dom：路由表 + Link/useNavigate 跳转 + useParams 取参 + Outlet 嵌套。
