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

user_4128489 0
Viewed 1181

This question is already asked here but in another context, and for another purpose.

Dependencies:

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

Suppose I have the following routing structure:

 <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>

My purpose is to extract the entire "System File" sub-tree, and export it from another file called "SystemFile.jsx", as follows:

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>
    )
}

And then reuse it inside the original route:

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

This is yielding to the following error : "All component children of Routes must be a Route or React.Fragment"

Your help is appreciated.

react-router-dom react-router reactjs
1 Answers

SystemFileRoutes isn't a Route or React.Fragment so it can't be rendered as a child.

SystemFileRoutes must render its Route components into a Routes component.

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>
  );
}

Move the "parent" route to the main routes:

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

Edit error-systemfileroutes-is-not-a-route-component-all-component-children-of-ro

user_86908570
Related