React Router v6嵌套路由匹配异常：/blogs/sampleblog未路由到子组件

你的问题出在路由对象的嵌套结构写错了，sampleblog路由没有被正确设置为blogs的子路由，导致React Router无法识别它是嵌套路由，自然只会匹配到顶级的BlogsPage组件。

错误原因 #

看你的代码，children数组被错误地放在了blogs路由对象的外面（注意大括号的闭合位置），相当于children是和blogs路由同级的兄弟路由，而不是它的子路由：

// 错误写法：children在blogs对象外面
{
  path: "blogs",
  element: <BlogsPage /> }, // 这里已经闭合了blogs对象的大括号
  children: [
    { path: "sampleblog", element: <SampleBlog /> },
  ]
},

修复步骤 #

1. 修正路由嵌套结构：把children属性移到blogs路由对象内部，和path、element同级：

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    errorElement: <ErrorPage />,
    children: [
      { path: "", element: <HomePage /> },
      { path: "home", element: <HomePage /> },
      {
        path: "blogs",
        element: <BlogsPage />,
        // 把children放在blogs路由对象内部
        children: [
          { path: "sampleblog", element: <SampleBlog /> },
        ]
      },
    ]
  },
]);

2. 在父组件中添加<Outlet />：React Router的嵌套路由需要父组件渲染<Outlet />来显示子路由的内容，所以你需要在BlogsPage组件里引入并使用Outlet：

import { Outlet } from 'react-router-dom';

function BlogsPage() {
  return (
    <div>
      <h1>博客列表页</h1>
      {/* 子路由的内容会渲染在这里 */}
      <Outlet />
    </div>
  );
}

完成这两步后，访问https://adomain/blogs/sampleblog时，就会正确匹配到SampleBlog组件，并且它会渲染在BlogsPage的<Outlet />位置。

内容的提问来源于stack exchange，提问作者Steve Buck