Creating Root Route View after Nesting Routes with React Router

November 19, 2022

I have created an app that has a dashboard path and then some nested routes. I want my root dashboard path to display the main dashboard view and then the nested routes to simply display whatever element they have set.

<Route
  path="dashboard"
  element={
    <PrivateRoute>
      <ModalProvider>
        <Dashboard />
      </ModalProvider>
    </PrivateRoute>
  }
>
  <Route path="settings" element={<Account />} />
  <Route path="pets" element={<Pets />} />
  <Route path="calendar" element={<Calendar />} />
  <Route
    path="calculator"
    element={
      <CalculatorProvider>
        <Calculator />
      </CalculatorProvider>
    }
  />
</Route>

but it seems like I can not just add the main dashboard view in the Dashboard component because then of course whatever is in that component displays for every nested route. How can I have the route path ‘dashboard’ display its own component?

>Solution :

If I understand the question correctly, you want the <Dashboard /> component to render on "/dashboard" while the other component render on "/dashboard/settings" etc. Render the <Dashboard /> on an index route.

Example:

const DashboardLayout = () => (
  <PrivateRoute>
    <ModalProvider>
      <Outlet />
    </ModalProvider>
  </PrivateRoute>
);

…

<Route path="dashboard" element={<DashboardLayout />}>
  <Route index element={<Dashboard />} />          // "/dashboard"
  <Route path="settings" element={<Account />} />  // "/dashboard/settings"
  <Route path="pets" element={<Pets />} />         // "/dashboard/pets"
  <Route path="calendar" element={<Calendar />} /> // "/dashboard/calendar"
  <Route
    path="calculator"                              // "/dashboard/calculator"
    element={
      <CalculatorProvider>
        <Calculator />
      </CalculatorProvider>
    }
  />
</Route>