Lesson 21 — BrowserRouter, Routes & Route Explained

Introduction 😊

In the previous lesson, you learned what React Router is and why routing is needed in React applications.

Now it’s time to understand the three most important building blocks of React Router:

• BrowserRouter
• Routes
• Route

These components work together to map URLs to React components.

In this lesson, you will learn:

• What BrowserRouter is
• What Routes and Route are
• How they work together
• Step-by-step routing setup
• Common beginner mistakes

Let’s begin 🚀

What Is BrowserRouter? 🤔

BrowserRouter is a router component that uses the browser’s history API.

👉 In simple words:

BrowserRouter enables URL-based navigation in React apps.

Key role of BrowserRouter:

• Keeps UI in sync with URL
• Enables back/forward navigation
• Required for all routing features

Why BrowserRouter Is Required 🧠

Without BrowserRouter:

• React Router will not work ❌
• Routes will not be recognized ❌
• Navigation will break ❌

👉 Every React app using React Router must be wrapped inside BrowserRouter.

Basic BrowserRouter Setup 📌

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

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

export default App;

📌 Usually placed at the top level of the app.

What Is Routes? 🔁

Routes is a container that holds multiple Route components.

👉 It tells React Router:

“Here are all my routes — choose the one that matches the URL.”

What Is Route? 🛣️

Route defines:

• A path (URL)
• A component to render

👉 In simple words:

Route connects a URL to a React component.

Basic Routes & Route Example 🧩

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

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

✔ / → Home component
✔ /about → About component

Creating Page Components 📄

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

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

👉 React Router renders the component based on the URL.

How BrowserRouter, Routes & Route Work Together ⚙️

1️⃣ BrowserRouter listens to URL changes
2️⃣ Routes checks all Route paths
3️⃣ Matching Route renders its component

👉 This happens without page reload ⚡

The element Prop Explained 🧠

In React Router v6:

<Route path="/about" element={<About />} />

• element expects JSX
• NOT a component name

❌ Wrong:

element={About}

✅ Correct:

element={<About />}

Multiple Routes Example 📚

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/login" element={<Login />} />
  <Route path="/dashboard" element={<Dashboard />} />
</Routes>

👉 Clean and readable routing structure.

Common Beginner Mistakes ❌

• Forgetting BrowserRouter
• Placing Routes outside BrowserRouter
• Using old component prop (v5)
• Not using element prop
• Typos in paths

💡 Most routing errors come from missing BrowserRouter.

BrowserRouter vs HashRouter ⚖️ (Quick Note)

👉 For modern apps, always use BrowserRouter.

Conclusion 🎯

BrowserRouter, Routes, and Route form the foundation of routing in React.

Key takeaways:

• BrowserRouter wraps the app
• Routes groups all routes
• Route maps URL to component
• Clean routing improves user experience
• Required for real-world React apps

👉 If routing is the road, BrowserRouter is the engine 🚗💨

Frequently Asked Questions (FAQs) ❓

Is BrowserRouter mandatory?

Yes, for web-based routing.

Can I have multiple Routes components?

Yes, but keep routing organized.

Which React Router version is this?

React Router v6.

What’s Next? 🚀

👉 In the next lesson, we will learn:

Lesson 22 — useParams & useNavigate Explained
Handling dynamic routes and programmatic navigation.