Lesson 20 — React Router Introduction (Routing & Navigation)

Introduction 😊

So far, you have learned how to build single components and manage data using hooks.

But real applications don’t have just one page.
They have multiple pages like:

• Home 🏠
• About ℹ️
• Login 🔐
• Dashboard 📊

In React, we create multi-page experiences using React Router ⚛️

In this lesson, you will learn:

• What routing is
• Why React needs React Router
• What React Router does
• Basic setup and concepts
• Important router components

Let’s begin 🚀

What Is Routing? 🤔

Routing means navigating between different pages or views in an application.

In traditional websites:

• Each page reloads the browser
• New HTML is loaded from the server

In React:

• Pages change without reloading
• Only components change

👉 This creates a fast and smooth user experience.

Why React Needs React Router 🧠

React is a Single Page Application (SPA) framework.

This means:

• The app loads only once
• Navigation happens inside the app

React Router helps:

• Map URLs to components
• Handle browser navigation
• Create page-like structure in SPAs

What Is React Router? ⚛️

React Router is a popular library used for:

• Routing
• Navigation
• URL handling

👉 It allows you to define routes and render components based on the URL.

Installing React Router 📦

For web applications, install:

npm install react-router-dom

👉 This package provides routing components for browser apps.

Core Components of React Router 🔑

Here are the most important components:

Basic React Router Setup 🛠️

Step 1️⃣ Wrap App with BrowserRouter

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

function App() {
  return (
    <BrowserRouter>
      {/* routes go here */}
    </BrowserRouter>
  );
}

Step 2️⃣ Define Routes

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

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

👉 Each Route connects a URL path to a component.

Creating Simple Pages 📄

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

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

Navigation Using Link 🔗

Instead of <a> tags, React uses Link.

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

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link> | 
      <Link to="/about">About</Link>
    </nav>
  );
}

✔ No page reload
✔ Faster navigation

Why Not Use <a> Tag? 🚫

Using <a>:

• Reloads the page ❌
• Loses app state ❌

Using Link:

• Keeps SPA behavior ✅
• Preserves state ✅

Common Mistakes Beginners Make ❌

• Forgetting to wrap app in BrowserRouter
• Using <a> instead of Link
• Wrong path names
• Not installing react-router-dom

💡 Always check setup if routes don’t work.

Conclusion 🎯

React Router is essential for building multi-page React applications.

Key takeaways:

• React Router handles navigation
• BrowserRouter wraps the app
• Routes define URL mapping
• Link enables fast navigation
• Routing improves user experience

👉 Without React Router, real-world React apps are incomplete 💙

Frequently Asked Questions (FAQs) ❓

Is React Router part of React?

No. It’s a separate library.

Can we use React without React Router?

Yes, but only for single-view apps.

Which router is best for web apps?

react-router-dom.

What’s Next? 🚀

👉 In the next lesson, we will learn:

Lesson 21 — BrowserRouter, Routes & Route Explained
Deep dive into routing components.