Introduction to React Router: Complete Beginner’s Guide with Examples

Modern web applications often need multiple pages or views — for example, a homepage, about page, and contact page.

But React is a Single Page Application (SPA) framework. This means it doesn’t reload pages like traditional websites. Instead, it dynamically renders components based on the URL — and that’s where React Router comes in.

React Router allows navigation between pages without refreshing the browser.

What is React Router?

React Router is a standard library for routing in React applications.

It enables developers to:

Navigate between pages (components)
Display specific components based on the URL
Manage browser history
Support nested and dynamic routes

React Router makes your app feel like a multi-page website while still being a single-page app (SPA) underneath.

Key Features of React Router

Dynamic Routing – Routes are rendered dynamically based on app structure.
Declarative Syntax – Define routes using React components.
Nested Routes – Build multi-level navigation easily.
Route Parameters – Handle dynamic URLs like /user/:id.
Navigation without Reload – Change pages instantly without refreshing.
History Management – Keeps track of navigation history.

Installing React Router

To use React Router, install it in your project:

Basic Setup

Step 1: Import BrowserRouter

BrowserRouter wraps your entire app and enables routing functionality.

Step 2: Define Routes

Use Routes and Route to define paths and the components they should render.

Example:

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";

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

export default App;

Now your app can handle /, /about, and /contact routes!

Adding Navigation Links

Use the Link component to navigate between pages without reloading.

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

Unlike <a href>, <Link> prevents full page reloads — making navigation smooth.

Example: Full App with Navigation

import React from "react";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function Home() {
  return <h2>🏠 Welcome to Home Page</h2>;
}

function About() {
  return <h2>ℹ️ About Us Page</h2>;
}

function Contact() {
  return <h2>📞 Contact Page</h2>;
}

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link> |{" "}
        <Link to="/about">About</Link> |{" "}
        <Link to="/contact">Contact</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

When you click the links, the page changes instantly without refreshing.

Nested Routes Example

You can create routes inside other routes for better structure.

This allows URLs like:

/dashboard/profile
/dashboard/settings

Dynamic Routes Example

You can pass parameters inside the URL:

Then access it in the component:

Great for displaying user details or product pages.

Common Components in React Router

Component	Description
BrowserRouter	Wraps the app and enables routing
Routes	Container for all route definitions
Route	Defines a path and corresponding component
Link	For navigation without page reload
NavLink	Like Link, but highlights the active link
useNavigate	For programmatic navigation
useParams	Access URL parameters

Best Practices

Keep routes organized in a separate file for large projects.
Use <NavLink> for active link highlighting.
Avoid deeply nested routes unless necessary.
Use useNavigate instead of window.location for redirects.
Always wrap your app with BrowserRouter.

FAQ

Q1: Can I use React Router with Next.js?
No, Next.js has its own built-in routing system.

Q2: What’s the difference between BrowserRouter and HashRouter?
BrowserRouter uses the HTML5 history API, while HashRouter uses URL hashes (e.g., /#/about).

Q3: Does React Router reload the page?
No. It changes components without reloading the page.