A common pattern in the vast majority of routing system is to allow the refactoring out of groups of routes to reduce complexity and the size of files (and sometimes also to make it easy to apply changes across a group of routes). Otherwise you could end up with a super long file with a lot of dependencies.

When I look in the react router docs to see what they say about this I see:

(TODO: need to talk about nesting, maybe even a separate doc)

• (https://reactrouter.com/en/main/route/route#children).

So say I have a DefaultRoutes component that uses a <Routes> component and some <Route> children with a set of some patient routes:

return (
    <Routes>
          {/*..other routes*/}
        <Route path="/patients" element={
          <RequireAuth>
            <DefaultLayout />
          </RequireAuth>
        }>
          <Route index element={<Patients />} />
          <Route path=":patientId">
            <Route index element={<PatientDetails />} />
            <Route path="edit" element={<EditPatient />} />
          </Route>

          <Route path="new">
            <Route index element={<NewPatient />} />
            <Route path=":clinicId" element={<NewPatient />} />
          </Route>
        </Route>
        {/*..other routes*/}
      </Routes>
);

How would I refactor my patient routes into a separate component (<PatientRoutes) or whatever, just so they weren’t in the same file at the least?