使用react router V6子组件未渲染

Question

我有一个以下组件，我正在尝试使用 React 路由器。

const RouteList = [
  {
    path: "/",
    element: withSuspenseWrapper(SharedView),
    errorElement: withSuspenseWrapper(ErrorView),
    children: [
      {
        index: true,
        element: withSuspenseWrapper(HomeView),
      },
      {
        path: "manageteam",
        element: withSuspenseWrapper(Manageteam),
        children: [
          {
            path: ':id',
            element: withSuspenseWrapper(ManageteamInfo),
          },
        ],
      },
    ],
  }
];


function withSuspenseWrapper(Component) {
  return (
    <Suspense fallback={<Loader loadingText="Preparing menu" />}>
      <Component />
    </Suspense>
  );
}

在这里，当我尝试走路线

/manageteam/12

时，它不会渲染受尊重的组件。仍然渲染

Manageteam

组件，而不是

ManageteamInfo

组件。

对此有什么想法吗？

Answer 1

这些路线应该在同一层

const RouteList = [
  {
    path: "/",
    element: withSuspenseWrapper(SharedView),
    errorElement: withSuspenseWrapper(ErrorView),
    children: [
      {
        index: true,
        element: withSuspenseWrapper(HomeView),
      },
      {
        path: "manageteam",
        children: [
          {
            index: true,
            element: withSuspenseWrapper(Manageteam),
          },
          {
            path: ":id",
            element: withSuspenseWrapper(ManageteamInfo),
          },
        ],
      },
    ],
  },
];