Basic Routing

Relax. We'll talk through this in plain words — no textbook voice.

Basic routing maps a URL path to a component. When you want `/` to show Home, `/about` to show About, and `/contact` to show Contact, you reach for `Routes` and `Route`.

jsx

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={<h1>Home Page</h1>} />
        <Route path="/about" element={<h1>About Page</h1>} />
      </Routes>
    </BrowserRouter>
  );
}

The nav has two links, and each route shows a different heading. Click `/about` and the About Page component appears.

You should see

Two links, Home and About, appear — clicking either one changes the heading without reloading the page.

Info

In a real project, it's better to pull each route's component out separately, like `element={}`, rather than inlining it.

Easy traps

Using ` ` can trigger a full browser page reload. For SPA navigation, use ` ` instead.