React Router

Install react-router-dom

npm install react-router-dom

Basic Setup

import React from 'react';
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={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

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

function About() {
  return <h1>About Us</h1>;
}

Link vs NavLink

NavLink automatically adds an active class.

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

function Navbar() {
  return (
    <nav>
      <NavLink to="/" className={({ isActive }) => isActive ? 'active' : ''}>
        Home
      </NavLink>
      <NavLink to="/products">Products</NavLink>
      <NavLink to="/contact">Contact</Outlet>
    </nav>
  );
}

useParams

useParams reads parameters from the URL.

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

function ProductDetail() {
  const { id } = useParams();

  return <h2>Product #{id}</h2>;
}

// Route
<Route path="/products/:id" element={<ProductDetail />} />

useNavigate

useNavigate is for programmatic navigation.

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

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

  const handleLogin = async (credentials) => {
    const success = await login(credentials);
    if (success) {
      navigate('/dashboard');
    }
  };

  return (
    <form onSubmit={handleLogin}>
      {/* form fields */}
      <button type="submit">Log In</button>
    </form>
  );
}

Nested Routes

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

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

404 Page

function NotFound() {
  return (
    <div>
      <h1>404</h1>
      <p>Page not found</p>
      <Link to="/">Back to Home</Link>
    </div>
  );
}

// Add a catch-all route at the end
<Route path="*" element={<NotFound />} />

Example: Simple Multi-Page App

function App() {
  return (
    <BrowserRouter>
      <Layout>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/products" element={<Products />} />
          <Route path="/products/:id" element={<ProductDetail />} />
          <Route path="/about" element={<About />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </Layout>
    </BrowserRouter>
  );
}

function Layout({ children }) {
  return (
    <div>
      <header>
        <nav>
          <NavLink to="/">Home</NavLink>
          <NavLink to="/products">Products</NavLink>
          <NavLink to="/about">About</NavLink>
        </nav>
      </header>
      <main>{children}</main>
      <footer>
        <p>&copy; 2024 Online Store</p>
      </footer>
    </div>
  );
}

React Router enables SPA navigation without page reloads. This is the foundation for building multi-page applications in React.