How do you handle nested routes with complex layouts

Question

Can i know How do you handle nested routes with complex layouts?

Answer 1

To manage nested routes with complex layouts in React Router, follow these steps:

1. Define a Layout Component

Create a shared layout with a common UI (e.g., navbar, sidebar).

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

const DashboardLayout = () => {

  return (

    <div>

      <nav>

        <Link to="stats">Stats</Link> | <Link to="settings">Settings</Link>

      </nav>

      <main>

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

      </main>

    </div>

  );

};

export default DashboardLayout;

2. Define Nested Routes in App.js

Use <Outlet /> in the layout to render child components.

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

import DashboardLayout from "./DashboardLayout";

import Stats from "./Stats";

import Settings from "./Settings";

import Home from "./Home";

function App() {

  return (

    <Router>

      <Routes>

        <Route path="/" element={<Home />} />

        {/* Nested Routes inside DashboardLayout */}

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

          <Route path="stats" element={<Stats />} />

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

        </Route>

      </Routes>

    </Router>

  );

}

export default App;

3. Create Nested Components

Components for Stats and Settings.

const Stats = () => <h2>Dashboard Stats</h2>;

export default Stats;


const Settings = () => <h2>Dashboard Settings</h2>;

export default Settings;