How can you implement nested routes in a React application using React Router

Question

Can you tell me How can you implement nested routes in a React application using React Router?

Answer 1

To implement nested routes in a React application using React Router v6+, follow these steps:

1. Define Routes with Nesting

Use <Routes> and nested <Route> components:

import { BrowserRouter, Routes, Route } from "react-router-dom";

import Dashboard from "./Dashboard";

import Profile from "./Profile";

import Settings from "./Settings";

function App() {

  return (

    <BrowserRouter>

      <Routes>

        <Route path="dashboard" element={<Dashboard />}>

          <Route path="profile" element={<Profile />} />

          <Route path="settings" element={<Settings />} />

        </Route>

      </Routes>

    </BrowserRouter>

  );

}

2. Render <Outlet /> in Parent Component

Inside Dashboard.js, render child components via <Outlet />:

import { Outlet } from "react-router-dom";

function Dashboard() {

  return (

    <div>

      <h2>Dashboard</h2>

      <Outlet /> {/* Renders nested routes */}

    </div>

  );

}

export default Dashboard;