❮ Previous Next ❯

Advanced Routing

  • This lesson introduces advanced routing in React and explains how to manage complex navigation structures using React Router.

  • Advanced Routing

    Dynamic Routes

    Dynamic routes handle dynamic data.

    Example:

<Route path="/user/:id" element={<User />} />

  • URL:

/user/101

  • URL Parameters

    Access URL parameters using useParams.

    Example:

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

const { id } = useParams();

  • Used for:

    • Product pages

    • Profile pages

    • Blog posts

    Nested Routes

    Nested routes allow routes inside routes.

    Example:

<Route path="/dashboard" element={<Dashboard />}>
  <Route path="profile" element={<Profile />} />
  <Route path="settings" element={<Settings />} />
</Route>
  • Improves structure for complex apps.
❮ Previous Next ❯