Error: [SystemFileRoutes] is not a Route component. All component children of Routes must be a Route or React.Fragment (React router V6)

Question

这个问题已经被问过但在另一个上下文中，并且出于另一个目的。

依赖关系：

 "react": "^17.0.2",
 "react-dom": "^17.0.2",
 "react-router-dom": "^6.2.2"

假设我有以下路由结构：

 <Route path='/' element={<Outlet />}>
        <Route path='SystemFile'  >
           <Route index element={<Navigate to="HospitalInfo" />} />
           <Route path='HospitalInfo' element={<HospitalInfoWithTabs tabPages={tabs} />} />
           <Route path='HospitalControls' element={<HospitalControlsWithTabs tabPages={tabs} />} />
           <Route path='LabControls' element={<LabControlsWithTabs tabPages={tabs} />} />
           <Route path='*' element={<Navigate to="HospitalInfo" />} />
        </Route>
 </Route>

我的目的是提取整个“系统文件”子树，并从另一个名为“SystemFile.jsx”的文件中导出，如下：

export function SystemFileRoutes() {
    return (
        <Route path='SystemFile'  >
            <Route index element={<Navigate to="HospitalInfo" />} />
            <Route path='HospitalInfo' element={<HospitalInfoWithTabs tabPages={tabs} />} />
            <Route path='HospitalControls' element={<HospitalControlsWithTabs tabPages={tabs} />} />
            <Route path='LabControls' element={<LabControlsWithTabs tabPages={tabs} />} />
            <Route path='*' element={<Navigate to="HospitalInfo" />} />
        </Route>
    )
}

然后在原来的路线内重复使用：

 <Route path='/' element={<Outlet />}>
              <SystemFileRoutes />
 </Route>

这会产生以下错误： “路由的所有子组件必须是路由或 React.Fragment”

感谢您的帮助。

Answer 1

SystemFileRoutes 不是 Route 或 React.Fragment 所以它不能呈现为 child.

SystemFileRoutes 必须将其 Route 组件呈现为 Routes 组件。

function SystemFileRoutes() {
  return (
    <Routes>
      <Route index element={<Navigate to="HospitalInfo" />} />
      <Route
        path="HospitalInfo"
        element={<HospitalInfoWithTabs tabPages={tabs} />}
      />
      <Route
        path="HospitalControls"
        element={<HospitalControlsWithTabs tabPages={tabs} />}
      />
      <Route
        path="LabControls"
        element={<LabControlsWithTabs tabPages={tabs} />}
      />
      <Route path="*" element={<Navigate to="HospitalInfo" />} />
    </Routes>
  );
}

将“parent”路线移至主要路线：

<Routes>
  <Route path="/*">
    <Route path="SystemFile/*" element={<SystemFileRoutes />} />
    ...
  </Route>
</Routes>

Error: [SystemFileRoutes] is not a Route component. All component children of Routes must be a Route or React.Fragment (React router V6)

Error: [SystemFileRoutes] is not a Route component. All component children of Routes must be a Route or React.Fragment (React router V6)

reactjs

react-router

react-router-dom