Redirect root path to child in react-router 6

February 6, 2023

I’m trying to force redirect the exact root path / to a child path (we have several modules and the root will just direct you to the first one, there’s nothing to show at the actual root).

However I can’t find any examples for the root path, and trying other approaches (with Navigation to just trigger an infinite loop.

<Route element={<Navigate replace to='/module/submodule' />} path='/'>
  <Route element={<Module />} handle={{ crumb: (): string => 'Module' }} path='module'>
    <Route element={<Submodule />} handle={{ crumb: (): string => 'Submodule' }} path='submodule' />
  </Route>
</Route>

I need to redirect / to /module/submodule

>Solution :

You should be able to use an index route.

<Route path='/'>
  <Route element={<Navigate replace to='/module/submodule' />} index />
  <Route element={<Module />} handle={{ crumb: (): string => 'Module' }} path='module'>
    <Route element={<Submodule />} handle={{ crumb: (): string => 'Submodule' }} path='submodule' />
  </Route>
</Route>