So far in this series, all our React apps have been single-page applications (SPA) where everything renders in one place. But in real projects, we often need multiple pages:

• A Home Page
• An About Page
• A Contact Page
• A Dashboard Page

👉 This is where React Router comes in.

React Router is a popular library that allows us to:

• Create multiple pages inside a React app.
• Switch between them without reloading the browser.
• Pass props and state between pages.

Step 1 – Install React Router

In your React project, install React Router:

npm install react-router-dom

npm install react-router-dom

Step 2 – Setup Basic Routes

In your App.js:

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

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

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

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

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

export default App;

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

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

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

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

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

export default App;

Explanation:

First, import the required components:

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

What do these mean?

• BrowserRouter (renamed as Router)
  • This is the “main wrapper” for your app.
  • It uses the browser’s history API to keep track of navigation.
  • Without this, React Router won’t work.
• Routes
  • Think of it as a container for all your routes.
  • It checks the current URL and decides which <Route> to render.
• Route
  • Defines a path and the component that should render at that path.
  • Example: <Route path="/about" element={<About />} /> This means → When the user visits /about, render the <About /> component.

👉 We use as Router simply to make our code shorter. Instead of writing <BrowserRouter>, we can just write <Router>.

• <Router> → Wraps the entire app.
• <Routes> → Holds all your routes.
• <Route> → Defines a path and which component should render.

Now when you visit:

• / → Home Page
• /about → About Page
• /contact → Contact Page

Step 3 – Navigation with Links

Instead of using normal <a> tags, we use React Router’s Link component to switch 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>
  );
}

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

Then include <Navbar /> in App.

👉 Now you can click links and move between pages instantly!

Step 4 – Using useNavigate for Programmatic Navigation

Sometimes you need to navigate via JavaScript (e.g., after login, redirect to dashboard). For that, use useNavigate:

import { useNavigate } from "react-router-dom";

function Login() {
  const navigate = useNavigate();

  const handleLogin = () => {
    // imagine successful login
    navigate("/dashboard");
  };

  return (
    <div>
      <h2>Login Page</h2>
      <button onClick={handleLogin}>Login</button>
    </div>
  );
}

import { useNavigate } from "react-router-dom";

function Login() {
  const navigate = useNavigate();

  const handleLogin = () => {
    // imagine successful login
    navigate("/dashboard");
  };

  return (
    <div>
      <h2>Login Page</h2>
      <button onClick={handleLogin}>Login</button>
    </div>
  );
}

Step 5 – Nested Routes

You can also nest routes inside another:

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      <Routes>
        <Route path="profile" element={<h3>Profile Page</h3>} />
        <Route path="settings" element={<h3>Settings Page</h3>} />
      </Routes>
    </div>
  );
}

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      <Routes>
        <Route path="profile" element={<h3>Profile Page</h3>} />
        <Route path="settings" element={<h3>Settings Page</h3>} />
      </Routes>
    </div>
  );
}

Now:

• /dashboard/profile → Profile
• /dashboard/settings → Settings

Example App Structure

App
 ┣ Navbar
 ┣ Home (/)
 ┣ About (/about)
 ┣ Contact (/contact)
 ┣ Dashboard (/dashboard)
    ┣ Profile (/dashboard/profile)
    ┣ Settings (/dashboard/settings)

App
 ┣ Navbar
 ┣ Home (/)
 ┣ About (/about)
 ┣ Contact (/contact)
 ┣ Dashboard (/dashboard)
    ┣ Profile (/dashboard/profile)
    ┣ Settings (/dashboard/settings)

Internal Links

• Revisit Day 16 – Fetching Data to combine with routing for dynamic pages.

External Links

• React Router Docs

Conclusion

With React Router, we can build apps that feel like multi-page websites while keeping the efficiency of a single-page application (SPA).

👉 Next Blog (Day 19): Protected Routes & Auth Basics (login/logout flow)