React Router: Client-Side Navigation

React Router is the standard library for routing in React. It allows you to build a **Single-Page Application (SPA)**—a web app that loads a single HTML page and dynamically updates content as the user interacts with it. This approach is much faster than traditional "multi-page applications" because it avoids full-page reloads.

At its core, React Router's job is to keep your UI in sync with the browser's URL. Let's explore the essential components and hooks from React Router v6.

The Core Component Hierarchy

To get started, you need to understand four main components that work together:

• <BrowserRouter>: You wrap your *entire application* in this component. It connects your app to the browser's URL using the HTML5 history API, allowing it to read and change the URL.
• <Routes>: This component is the successor to `<Switch>`. You wrap all your individual routes within it. It intelligently looks at the current URL and renders the *best* matching child `<Route>`.
• <Route>: This is the component that defines a single route. It has two main props:
  • `path`: A string (like `"/about"`) that matches a URL segment.
  • `element`: The React component to render when the path matches (like `<AboutPage />`).
• <Link>: This is your navigation tool. It renders an `<a>` tag, but it intercepts the click. Instead of reloading the page, it just changes the URL, letting the `<Routes>` component handle the rest.

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link>
      </nav>

      <Routes>
        <Route path="/" element={<h2>Home Page</h2>} />
        <Route path="/about" element={<h2>About Page</h2>} />
      </Routes>
    </BrowserRouter>
  );
}

Handling Dynamic Data with Hooks

Static pages are great, but most apps need dynamic content, like user profiles or product details. React Router handles this with URL parameters and hooks.

1. URL Parameters & `useParams()`

You can define a "dynamic segment" in your route's path using a colon (`:`). For example, `path="/users/:userId"`. This will match URLs like `/users/123` or `/users/alice`.

Inside your component (e.g., `UserProfilePage`), you use the useParams() hook to access the value of that dynamic segment.

// In your <Routes>
<Route path="/users/:userId" element={<UserProfile />} />

// In UserProfile.js
import { useParams } from 'react-router-dom';

function UserProfile() {
  let { userId } = useParams();
  // If URL is "/users/123", userId will be "123"
  return <h2>User Profile: {userId}</h2>;
}

2. Programmatic Navigation & `useNavigate()`

What if you need to redirect a user after they submit a form or log in? You can't use a `<Link>` for that. Instead, you use the useNavigate() hook.

Calling `useNavigate()` gives you a function (conventionally called `Maps`) that you can call to send the user to a new URL.

import { useNavigate } from 'react-router-dom';

function LoginForm() {
  let navigate = useNavigate();

  const handleSubmit = (event) => {
    event.preventDefault();
    // ... (your login logic)
    // On success, redirect to the dashboard:
    navigate("/dashboard");
  };

  return <form onSubmit={handleSubmit}>...</form>;
}

Advanced Pattern: Nested Routes & `<Outlet />`

This is one of the most powerful features of v6. Nested routes allow you to create layouts that share common UI (like a sidebar or dashboard header) while changing the main content.

You define child routes by nesting `<Route>` components. The parent route component then uses the <Outlet /> component to specify *where* its child routes should be rendered.

<Routes>
  <Route path="/dashboard" element={<Dashboard />}>
    <Route path="profile" element={<Profile />} />
    <Route path="settings" element={<Settings />} />
  </Route>
</Routes>

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

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <nav>
        <Link to="profile">Profile</Link>
        <Link to="settings">Settings</Link>
      </nav>
      <hr />
      <Outlet /> {/* Child renders here */}
    </div>
  );
}

When a user visits `/dashboard/profile`, React Router will render the `Dashboard` component, and inside its `<Outlet />`, it will render the `Profile` component.

Key Takeaway: React Router v6 provides a powerful, hook-based API to manage all aspects of navigation. By mastering `Routes`, `Route`, `Link`, and the `useParams`, `useNavigate`, and `Outlet` tools, you can build complex, fast, and user-friendly SPAs.