React Introduction to React Router

In the last lesson, React API Search Functionality, you pulled live data into a single screen. Now let’s meet React Router, the tool that lets your app have many pages and move between them without a slow full reload.

🤔 Why do we need React Router?

Here’s the pain. A React app is, by default, a single page: one HTML file, one screen. But users expect many pages with different URLs.

• You want a home page at /, an about page at /about, and so on.
• You want the browser’s back and forward buttons to work.
• You want a user to share a link like /products/5 and have it open the right page.
• But you don’t want a full page reload every time, because that’s slow and feels clunky.

So React Router solves this. It shows different components for different URLs, all without reloading the browser, so the page changes feel instant.

🐍 What is React Router?

React Router is a library that adds routing to a React app. So what is routing?

• Routing means deciding which page to show based on the URL.
• React Router watches the URL and shows the matching component for it.
• So when the URL is /about, it shows your About component. When it’s /, it shows Home.
• It does all this in the browser with no reload, which is called client-side routing.

So React Router is like a switchboard. It looks at the current URL and connects it to the right component to display.

🔁 How a normal site loads pages vs an SPA

To see why this matters, compare how an old-style website and a React app handle page changes.

• On a traditional website, clicking a link asks the server for a whole new HTML page. So the screen goes blank, then the new page loads.
• In a single-page application (SPA), the browser loads one page once, then JavaScript swaps the content as you navigate.
• React Router is what does that swapping. It changes the URL and the visible component without going back to the server.

Here’s the difference as a picture.

So the win is speed and smoothness. The page changes instantly because nothing is reloaded from the server.

🧩 The main pieces you’ll use

React Router gives you a handful of building blocks. You’ll meet each one in the coming lessons, but here’s the map so the names aren’t a surprise.

• A Router wraps your whole app and turns on routing.
• Routes and Route define which component shows for which URL path.
• Link and NavLink are how users move between pages, replacing the plain <a> tag.
• useNavigate lets your code move to a page on its own, like after a form submit.
• Route parameters let one route handle many URLs, like /users/1 and /users/2.

So the whole module is about these pieces. Define routes, link between them, and read information from the URL.

🌍 Where routing is used

Almost every real app you use has routing. Once you notice it, you see it everywhere.

• A shop with a home page, category pages, and a page per product.
• A social app with a feed, a profile page, and a settings page.
• A dashboard with sections like Overview, Reports, and Account.
• Any app where the URL changes as you move around and you can share or bookmark a link.

So if your app has more than one screen and you want real URLs for them, that’s exactly what React Router is for.

⚠️ A common misunderstanding

People often think they need many HTML files for many pages. With React Router, that’s not how it works.

• You still have just one real HTML file. The “pages” are React components.
• React Router shows the right component for the URL, but it’s all the same single-page app.
• So /about doesn’t load an about.html. It tells React Router to show the About component.

So don’t go looking for separate HTML files per page. In a React SPA, pages are components, and React Router decides which one to show.

✅ Best Practices

A few things to keep in mind as you start.

• Use React Router for apps with more than one screen and real, shareable URLs.
• Think of each “page” as a component that React Router shows for a given path.
• Use Link, not a plain <a>, to move between pages, so you keep the no-reload speed.
• Keep your route definitions in one place, usually near the top of the app, so they’re easy to find.

🧩 What You’ve Learned

• ✅ A React app is one page by default, but real apps need many pages with different URLs
• ✅ React Router is a separate library that adds routing: showing a component based on the URL
• ✅ It does client-side routing, swapping components with no full page reload, which feels instant
• ✅ This makes your app a single-page application (SPA): one HTML file, components as pages
• ✅ The main pieces are the Router, Routes/Route, Link/NavLink, and useNavigate
• ✅ Pages are components, not separate HTML files

🧠

Check Your Knowledge

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

1. 1

   What does React Router do?

   It fetches data from an API It shows different components based on the URL, without reloading the page It styles your components It manages global state
   Check

   Why: React Router is a routing library. It watches the URL and shows the matching component, all in the browser with no full reload.

2. 2

   What is client-side routing?

   The server sends a new HTML page for every URL JavaScript swaps the visible component and changes the URL without reloading from the server Routing that only works offline A way to fetch data faster
   Check

   Why: In client-side routing, the page loads once and JavaScript handles navigation by swapping components and updating the URL, so there's no slow full reload.

3. 3

   In a React single-page app, what are the different pages?

   Separate HTML files, one per page React components that the router shows for each URL Different websites Images loaded from the server
   Check

   Why: There's still one real HTML file. Each 'page' is a React component, and React Router decides which component to show for the current URL.

4. 4

   Is React Router part of React itself?

   Yes, it is built into React No, it is a separate library you install It is part of the browser It only works with class components
   Check

   Why: React Router is a separate, very popular package you add to your project. React itself does not include routing.

Score: 0 / 4 Reset

🚀 What’s Next?

Now you know what React Router is and why SPAs need it. Time to set it up. Next you’ll install React Router and wrap your app so routing is switched on and ready to use.

React Installing React Router