Implementing Nested Routes with Outlet and Index Routes in React Router v6

Desired outcome

You want a parent route that renders a shared layout (e.g., a header or sidebar) and displays different child pages inside that layout without a full page reload. The layout should persist when navigating between child URLs, and a default child view should appear when the parent path is visited directly.

Prerequisites

• React 16.8 or later (hooks are used).
• react-router-dom version 6 installed in your project.
• Basic familiarity with JSX, functional components, and the concept of routing.
• A development server running (e.g., npm start or vite) to test changes.

Procedure

1. Install the router if you haven’t already. Run this in your project root:

   npm install react-router-dom@6
   

   No special permissions are needed beyond standard npm access. To undo, run npm uninstall react-router-dom.

2. Create a layout component that will host the <Outlet>. This component renders the shared UI and delegates the child content to the outlet.

   import { Outlet } from 'react-router-dom';
   
   function DashboardLayout() {
     return (
       
         
           Dashboard
           
             
   
               
   Overview
               
   Settings
             
           
         
         
           {/* The outlet is where child route components render */}
           
         
       
     );
   }
   
   export default DashboardLayout;
   

3. Define the route tree in your app’s entry point (e.g., src/App.jsx). Use createBrowserRouter and RouterProvider from react-router-dom.

   import { createBrowserRouter, RouterProvider } from 'react-router-dom';
   import DashboardLayout from './DashboardLayout';
   import Overview from './Overview';
   import Settings from './Settings';
   
   const router = createBrowserRouter([
     {
       path: '/dashboard',
       element: <DashboardLayout />,
       children: [
         // Index route – renders when /dashboard is visited directly
         { index: true, element: <Overview /> },
         // Child route – renders under the layout when /dashboard/settings is visited
         { path: 'settings', element: <Settings /> },
       ],
     },
   ]);
   
   function App() {
     return <RouterProvider router={router} />;
   }
   
   export default App;
   

4. Implement the child components that will appear inside the outlet.

   function Overview() {
     return <p>Welcome to the dashboard overview.</p>;
   }
   
   export default Overview;
   
   function Settings() {
     return <p>Adjust your dashboard settings here.</p>;
   }
   
   export default Settings;
   

5. Start the development server to see the result:

   npm start
   

   Navigate to http://localhost:3000/dashboard and then to http://localhost:3000/dashboard/settings. The header and navigation should stay visible while the main content swaps between Overview and Settings.

Expected checks

• The layout (header and navigation) remains unchanged when switching between /dashboard and /dashboard/settings.
• The correct child component (Overview or Settings) appears inside the <Outlet>.
• The URL updates in the address bar without a full page reload (single‑page application behavior).
• Using React DevTools, you can inspect the route element tree and see that DashboardLayout contains an Outlet whose child matches the active route.

Recovery options

• If the outlet renders nothing:
  • Verify that the parent route’s element includes <Outlet />.
  • Check that the child route’s path is relative to the parent (e.g., path: 'settings' under /dashboard) and not an absolute path that would mismatch.
  • Ensure no later route in the array overrides the same path with a different element.
• If the index route never shows, confirm that you did not add a path property to the index route object; index routes match only when no child path is specified.
• If you encounter a blank screen after adding auth‑guarded logic around the layout, make sure to handle loading and unauthenticated states (e.g., show a fallback or redirect) before rendering <Outlet>.

Limitations and practical verification

This guide assumes you are using the default hash‑less browser router. If you need to support older browsers that lack the History API, switch to createHashRouter and adjust the path values accordingly. To verify that the router is working as expected, open the browser’s console and look for warnings about route mismatches; none should appear when navigating the defined paths.