Frontend Engineering | VoidX Academy

31. Routing (React Router)

Creating the Multi-Page Feel

React is technically a Single Page Application (SPA) library. By default, it has no concept of "pages" or "URLs". If a user wants to visit an "About Us" page, traditional HTML would make the browser download a completely new about.html file. In React, we use React Router to intercept the URL and instantly swap out components, creating lightning-fast, seamless navigation.

Setup: The BrowserRouter

To use React Router, you must wrap your entire application inside a <BrowserRouter>. This connects React to the browser's URL history API.

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './Home';
import Dashboard from './Dashboard';

export default function App() {
  return (
    <BrowserRouter>
      {/* The Routes component acts like a giant Switch statement */}
      <Routes>
        {/* If the URL is '/', render the Home component */}
        <Route path="/" element={<Home />} />
        
        {/* If the URL is '/dashboard', render the Dashboard component */}
        <Route path="/dashboard" element={<Dashboard />} />
      </Routes>
    </BrowserRouter>
  );
}

Navigation: The Link Component

Crucial Rule: Never use a standard HTML <a href="/"> tag for internal navigation in React. It will force the browser to do a hard refresh, which destroys all your React state! Always use React Router's <Link> component instead.

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

export default function Navbar() {
  return (
    <nav>
      <h1>My App</h1>
      {/* Link changes the URL without refreshing the page */}
      <Link to="/">Home</Link>
      <Link to="/dashboard">Dashboard</Link>
    </nav>
  );
}

Dynamic Routes (URL Parameters)

If you have an e-commerce store, you can't create a hardcoded route for every single product. You create a dynamic route using a colon :. The variable is captured and can be read by the component.

// In your Router setup:
// } />

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

export default function ProductPage() {
  // If the user visits /product/99, productId will equal "99"
  const { productId } = useParams();

  return <h1>Displaying details for Product #{productId}</h1>;
}

Knowledge Check

Ready to test your understanding of 31. Routing (React Router)?

30. Context API

32. API Calls in React