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>
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>
or
<Route path="dashboard" element={<Dashboard />}>
<Route index element={<Navigate to="home" replace />} />
<Route path="home" element={<Home />} />
<Route path="users" element={<Users />} />
</Route>