React Router: setup and routes

React itself has no pages — only components. To show different screens for different addresses, you use the React Router library (the course uses version 7). A route links an address to a component. Moving between pages happens without a reload: the address changes and the matching component is put in. Such an app is called a single-page application (SPA).

Installing

In the blog project folder run:

npm install react-router

Connecting it

The whole app is wrapped in BrowserRouter — in src/main.jsx:

// src/main.jsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router';
import App from './App.jsx';
 
createRoot(document.getElementById('root')).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>,
);

BrowserRouter watches the address in the browser and passes it to the components inside.

Pages

Page components usually live in src/pages/. Create two files:

// src/pages/HomePage.jsx
import PostList from '../components/PostList.jsx';
 
export default function HomePage() {
  return (
    <>
      <h1>Blog</h1>
      <PostList />
    </>
  );
}

// src/pages/AboutPage.jsx
export default function AboutPage() {
  return <h1>About the blog</h1>;
}

Routes

Routes picks the Route whose path matches the address and shows its component from the element prop:

// src/App.jsx
import { Route, Routes } from 'react-router';
import HomePage from './pages/HomePage.jsx';
import AboutPage from './pages/AboutPage.jsx';
 
export default function App() {
  return (
    <Routes>
      <Route path="/" element={<HomePage />} />
      <Route path="/about" element={<AboutPage />} />
    </Routes>
  );
}

Open http://localhost:5173/ — you see the post list; http://localhost:5173/about shows the heading "About the blog".

Links

Navigation uses the Link component. It changes the address without reloading the page. Create a menu, src/components/Nav.jsx:

// src/components/Nav.jsx
import { NavLink } from 'react-router';
 
export default function Nav() {
  return (
    <nav>
      <NavLink to="/">Posts</NavLink> <NavLink to="/about">About</NavLink>
    </nav>
  );
}

NavLink is a Link that adds the class active to the link of the current page. Render <Nav /> in App above Routes — the menu appears on every page, and with the rule .active { font-weight: bold; } the current item turns bold.

A 404 page

A route with an asterisk matches when no other route does:

// src/App.jsx
<Route path="*" element={<p>Page not found</p>} />

The address /abc shows "Page not found".

Common mistake

An ordinary <a href> link reloads the whole page: the app starts over and its state is lost.

// Wrong: <a href="/about">About</a>
 
<Link to="/about">About</Link>

Keep the a tag for links to other sites, and use Link and NavLink inside the app.