Setting Up React Router

Why Client-Side Routing Is Needed

A single-page React app has only one real HTML page, but users still expect different URLs to show different content (like /about vs /contact) without a full page reload. React Router listens to URL changes and swaps out which component renders, keeping navigation instant.

Note: Client-side routing means the browser's back/forward buttons still work, since React Router updates the URL using the History API.

Warning: Without a router set up, changing the URL manually does nothing — your app has no idea what to render for different paths.

Example: Why Client-Side Routing Is Needed

// Run in your local React project (npm install required)
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function Home() { return <p>Home Page</p>; }
function About() { return <p>About Page</p>; }

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

Installing and Wrapping Your App

After installing react-router-dom, the very first setup step is wrapping your top-level App component (or the render call itself) in a single <BrowserRouter>. Everything that needs routing — Routes, Link, useNavigate — only works inside this wrapper.

Note: BrowserRouter typically goes in your entry file (main.jsx/index.js), wrapping <App /> exactly once.

Warning: Wrapping only part of your component tree in BrowserRouter means components outside it can't use any router features.

Example: Installing and Wrapping Your App

// Run in your local React project (npm install required)
import { BrowserRouter } from 'react-router-dom';
import ReactDOM from 'react-dom/client';
import App from './App';

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

Example: Installing react-router-dom

$ npm install react-router-dom
added 3 packages in 2s

react-router-dom vs. react-router

React Router is published as multiple packages: react-router has the core routing logic, while react-router-dom adds the web-specific pieces (BrowserRouter, Link) on top of it. For any browser-based web app, you always want react-router-dom, not the bare core package.

Note: If you ever build a React Native app, you'd use react-router-native instead — same core, different platform bindings.

Warning: Installing plain react-router by mistake means BrowserRouter and Link won't be available, causing confusing import errors.

Example: Installing the Right Package

# Correct -- for any browser-based web app
npm install react-router-dom

# Wrong -- missing BrowserRouter, Link, and other DOM bindings
npm install react-router