react nested routes default path blank page

August 22, 2022

How can I make the parent path render a default outlet in react router v6 nested routes?
As you can see in the example I want to make "/dashboard" path take me to "/dashboard/home" by default.

For now it’s just rendering a blank screen in the Outlet.

<Route path={"dashboard"} element={<Dashboard />}>
  <Route path={"home"} element={<Home />} />        
  <Route path={"users"} element={<Users />} />        
</Route>

>Solution :

You can render an Index route to render some content when the path equals that of the parent route.

Example:

<Route path="dashboard" element={<Dashboard />}> // "/dashboard/*"
  <Route index element={/* some content */} />   // "/dashboard"
  <Route path="home" element={<Home />} />       // "/dashboard/home"
  <Route path="users" element={<Users />} />     // "/dashboard/users"
</Route>

If you want a specific nested route to be a "default" then either render it again as the index route or render a redirect to it.

Examples:

<Route path="dashboard" element={<Dashboard />}>
  <Route index element={<Home />} />
  <Route path="home" element={<Home />} />
  <Route path="users" element={<Users />} />
</Route>

<Route path="dashboard" element={<Dashboard />}>
  <Route index element={<Navigate to="home" replace />} />
  <Route path="home" element={<Home />} />
  <Route path="users" element={<Users />} />
</Route>