React Router Setup

React Router is a standard library for handling routing in React applications. It allows you to define different views (components) for different URLs, creating a single-page application (SPA) experience.

1. Installation

First, install React Router using npm or yarn:

npm install react-router-dom
# or
yarn add react-router-dom

react-router-domprovides the necessary components for browser-based routing.

2. Core Components

React Router relies on several key components:

• BrowserRouter:Wraps the entire app and enables client-side routing using the History API.
• Routes:Contains a collection ofRoutecomponents (replaces<Switch>in v6+).
• Route:Maps a URL path to a component.
• Link:Used for navigation without page reloads.
• useNavigate:Enables programmatic navigation.
• useParams:Accesses dynamic URL parameters.

3. Basic Setup Example

Here’s a simple routing setup:

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

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

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

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

4. Dynamic Routing (Parameters)

Routes can include dynamic segments:

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

function User() {
  const { id } = useParams();
  return <h2>User ID: {id}</h2>;
}

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/users/1">User 1</Link>
        <Link to="/users/2">User 2</Link>
      </nav>

      <Routes>
        <Route path="/users/:id" element={<User />} />
      </Routes>
    </BrowserRouter>
  );
}

:iddefines a dynamic segment, anduseParams()reads its value.

5. Programmatic Navigation

UseuseNavigateto navigate via code:

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

function Home() {
  const navigate = useNavigate();

  return (
    <div>
      <h2>Home</h2>
      <button onClick={() => navigate('/about')}>
        Go to About
      </button>
    </div>
  );
}

6. Nested Routes

Nested routes allow hierarchical layouts:

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

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      <ul>
        <li><Link to="settings">Settings</Link></li>
        <li><Link to="profile">Profile</Link></li>
      </ul>
    </div>
  );
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />}>
          <Route path="settings" element={<h2>Settings</h2>} />
          <Route path="profile" element={<h2>Profile</h2>} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

7.useRoutes(Advanced)

useRoutesallows defining routes as objects instead of JSX. It’s useful for large or configuration-driven apps.