React Installing React Router

Table of Contents +

In the last lesson, React Introduction to React Router, you learned why SPAs need routing. Now let’s install React Router and switch it on, so the next lesson can jump straight into creating pages.

🤔 What does setup involve?

Here’s the short version. Getting React Router ready is just two small steps.

Install the package, because React Router is a separate library, not part of React.
Wrap your whole app in a Router component, which turns routing on for everything inside.

So there’s nothing scary here. Install, wrap, done.

📦 Step 1: install the package

React Router for the web comes in a package called react-router-dom. You add it with npm, the tool that installs JavaScript packages.

npm install react-router-dom

A quick note on what this does.

It downloads react-router-dom into your project’s node_modules folder.
It adds the package to your package.json so your project remembers it.
After this, you can import from react-router-dom anywhere in your code.

The -dom part matters

Install react-router-dom, not just react-router. The -dom version is the one built for web browsers, and it includes everything you need like BrowserRouter and Link.

🧩 Step 2: wrap your app in BrowserRouter

Routing has to be switched on for your whole app. You do that by wrapping your top-level component in <BrowserRouter>. This is usually done in main.jsx (or index.js), the file that starts your app.

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>
);

Read what’s happening here.

We import BrowserRouter from react-router-dom.
We wrap <App /> inside <BrowserRouter>.
Now every component inside App can use routing: define routes, use Link, read the URL, all of it.

So BrowserRouter is the on switch. Everything inside it gets routing powers. Everything outside it does not.

Wrap once, at the top

You only need one BrowserRouter, and it goes at the very top, around your whole app. Don’t wrap individual components in their own routers. One at the root is all you need.

🔍 What is BrowserRouter, really?

It helps to know what this component actually does, so it’s not just magic.

BrowserRouter connects React Router to the browser’s address bar and history.
It watches the URL, so when it changes, React Router can show the right component.
It also makes the back and forward buttons work with your routes.
It uses clean URLs like /about, with no # in them.

So BrowserRouter is the bridge between your React app and the browser’s real URL. That’s why it has to sit at the top, wrapping everything.

✅ Verify it’s working

After these two steps, your app should run exactly as before, because you haven’t added any routes yet. That’s expected.

Run your app with npm run dev and check it still loads with no errors.
If you see a red error mentioning react-router-dom, the install probably didn’t finish, so run the install again.
Nothing visual changes yet. You’ve just switched routing on. The next lesson adds the actual pages.

So a quiet, working app after setup is exactly the sign you want. Routing is on, ready for routes.

⚠️ Common Mistakes

The top mistake is using Link or Routes without wrapping the app in BrowserRouter first.

// ❌ using routing features with no BrowserRouter around the app
// React Router throws: "useRoutes() may be used only in the context of a <Router>"

// ✅ wrap the app once at the top, then routing works everywhere inside
<BrowserRouter>
  <App />
</BrowserRouter>

Keep these in mind.

Don’t forget the BrowserRouter wrapper. Without it, every routing feature errors out.
Don’t install plain react-router. Use react-router-dom for web apps.
Don’t add multiple routers. One BrowserRouter at the root is enough.

✅ Best Practices

A few habits for a clean setup.

Put BrowserRouter in your entry file (main.jsx), wrapping the whole app.
Install react-router-dom, the web version, and keep it in package.json.
Keep the entry file simple: import, wrap, render. Save the route definitions for App.
Confirm the app still runs after setup before adding routes, so you catch install issues early.

Setup is a one-time thing

You do these two steps once per project. After that, you never touch the install or the BrowserRouter again. All the interesting work, defining routes and linking pages, happens inside your app.

🧩 What You’ve Learned

✅ React Router is a separate package, installed with npm install react-router-dom
✅ Use react-router-dom (the web version), not plain react-router
✅ Switch routing on by wrapping your whole app in <BrowserRouter>, usually in main.jsx
✅ BrowserRouter connects your app to the browser’s URL and history, with clean URLs
✅ Wrap once, at the top; one router for the whole app
✅ After setup nothing looks different yet, which is correct: you’ve only turned routing on

Check Your Knowledge

Test what you learned. Pick an answer for each question, then click Check.

🚀 What’s Next?

React Router is now installed and switched on. Time for the fun part: actually creating pages. Next you’ll define your first routes, so different URLs show different components.