React Router v6 这套骨架没问题,但帖子内容只写到第三步就断在 Layout 了;你说到的“第五步 createBrowserRouter”没有贴出来,另外 404 兜底和动态参数这两块也还没有落地,补上这几点才算完整。
404 与动态参数,以及两个容易忽略的点
- 兜底:在
<Routes>里加一条<Route path="*" element={<NotFound />} />,放在最后只是为了便于阅读,因为 v6 是按打分匹配,实际位置不影响匹配结果。注意嵌套路由里的通配不继承:父级布局下的 404 需要在父路由的children里单独再加一条path="*",否则只有顶层未命中的 URL 才生效。 - 默认子页用
index:<Route index element={<Home />} />,不要写成path="/",父路由已带该路径,再写绝对路径会出现匹配歧义和警告。 - 动态参数:
path="/posts/:id"配合const { id } = useParams(),v6 取出来永远是 string,做数字比较前记得Number(id);:id在哪层路由声明,就要在哪层的元素组件里取,父组件拿不到子路由的 params。
第五步大概长这样(用数据路由时可以省掉 BrowserRouter):
const router = createBrowserRouter([
{ path: '/', element: <Layout />, children: [
{ index: true, element: <Home /> },
{ path: 'posts/:id', element: <Post /> },
{ path: '*', element: <NotFound /> },
]},
])
// main.jsx: <RouterProvider router={router} />
配套的 API 对照也顺手记一下:useHistory → useNavigate、<Redirect> → <Navigate replace>、history.push → navigate('/x', { replace: true })、withRouter 直接删掉。
最后一坑:如果站点部署在子目录(比如 /app 下),BrowserRouter 要配 basename,并和 Vite 的 base 保持一致;另外服务器不做 history fallback(nginx try_files $uri $uri/ /index.html),在 /posts 上刷新会直接 404。这和论坛系统配伪静态是同一类问题,别忘了。

正式会员
认证极客










