react router v6 用法，路由配置和页面跳转

给 React 项目加页面切换，社区方案基本就是 react router 这一套，npm 包名叫 react-router-dom。现在主流是 v6 的写法，网上还能搜到不少老教程，看到 Switch、component 这类字眼就别照抄了，那是 v5 语法，直接用会报错。

基础配置：createBrowserRouter

import { createBrowserRouter, RouterProvider } from 'react-router-dom'; const router = createBrowserRouter([ { path: '/', element: <Home /> }, { path: 'user/:id', element: <User /> }, { path: '*', element: <NotFound /> } ]);

这是 react router v6 相对 v5 最大的变化：Switch 换成了自动匹配，谁匹配上谁渲染；component 属性换成 element，直接传 JSX。user/:id 是动态路由，页面里用 useParams 就能拿到 id。path 写星号的那条是 404 兜底。

跳转的两种方式

页面里放链接用 Link 组件，<Link to='/about'> 渲染成 a 标签但不刷新页面。代码里跳转用 useNavigate：

const navigate = useNavigate(); navigate('/login'); navigate(-1);

第二行的 -1 是返回上一页，相当于浏览器的后退按钮。

嵌套路由和 Outlet

后台常见的侧边栏布局：外层是带导航的 Layout，内层才是各个页面。父路由写 children 数组，父组件里放一个 Outlet 占位，子页面就渲染在这个位置，导航栏不用每个页面重复写一遍。

上线前记得处理三件事：404 路由兜底；路由守卫用组件包一层，没 token 就 navigate 到登录页；生产环境服务器要配回退规则，比如 Nginx 的 try_files 指向 index.html，否则刷新深层路径会直接 404。