React Router

Introduction

Every React application you have built so far in this course has rendered a single page. Real applications, though, usually need multiple views — a home page, a profile page, a settings page — and users expect to navigate between them with URLs, back/forward buttons, and bookmarks, just like on any traditional website.

React itself has no built-in concept of "pages" or "routes" — remember, it is a UI library, not a full framework. React Router is the standard companion library that adds this capability, letting a single-page application (SPA) show different components based on the current URL, without ever triggering a full page reload.

What is Client-Side Routing?

On a traditional multi-page website, clicking a link sends a brand-new request to the server, which sends back a whole new HTML document, and the browser reloads the entire page. Client-side routing works differently: the browser loads the React app once, and afterward a router library intercepts navigation, swaps out which component is displayed, and updates the URL in the address bar — all without contacting the server again.

Installing react-router-dom

React Router is not part of React itself, so it is installed as a separate package. The version used for web apps is react-router-dom.

npm install react-router-dom

added 6 packages in 2s

react-router-dom@6.x.x

Once installed, the library exports the pieces you need to define and navigate between routes: BrowserRouter, Routes, Route, and Link, all imported from 'react-router-dom'.

BrowserRouter, Routes, and Route

<BrowserRouter> is the outermost wrapper that enables routing for everything inside it — it should sit near the very top of your component tree, usually wrapping <App />. Inside it, <Routes> looks at the current URL and renders whichever <Route> matches, based on each Route's path prop.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/contact" element={<Contact />} />
    </Routes>
  );
}

export default App;

Visiting  /          → renders <Home />
Visiting  /about     → renders <About />
Visiting  /contact   → renders <Contact />

Only one Route's element renders at a time — whichever path matches the current URL. Everything outside the Routes block (like a shared navbar) renders on every page, since it sits outside the part that gets swapped.

Navigating with Link

A plain <a href="..."> tag would trigger a full page reload, defeating the purpose of client-side routing. React Router's <Link> component renders an anchor tag under the hood but intercepts the click, updating the URL and swapping components without reloading the page.

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

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/contact">Contact</Link>
    </nav>
  );
}

export default Navbar;

import { Routes, Route } from 'react-router-dom';
import Navbar from './Navbar';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';

function App() {
  return (
    <div>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </div>
  );
}

export default App;

Home  About  Contact   ← Navbar links, always visible

(page content below changes based on the URL, no reload)

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

React Router brings multi-page navigation to single-page React applications, letting different components render based on the current URL while keeping transitions instant and state intact. BrowserRouter enables routing, Routes and Route define what shows where, and Link handles navigation without reloading the page.

In this lesson, you installed react-router-dom, wrapped an app in BrowserRouter, defined a handful of routes, and built a navbar using Link. Next, you will learn how to build dynamic routes that read parameters straight out of the URL, like a user's ID on a profile page.