[Intro]

[Background Music: Friendly and engaging tone]

Instructor:

"Hey there, and welcome back! In our last lesson, we introduced React Router, which helps us create multi-page applications without refreshing the browser.

Now, let’s take it a step further by learning how to define routes and navigate between pages effectively.

By the end of this lesson, you’ll understand:

✅ How to create routes using <Route> and <Routes> (or <Switch> in older versions).

✅ How to navigate between pages using <Link> and <NavLink>.

✅ How to perform programmatic navigation using the useNavigate hook.

Let’s get started!"

1. Topic Overview

Instructor:

"In a traditional website, clicking a link reloads the entire page to navigate to a different section.

With React Router, we can create single-page applications (SPAs) where clicking a link dynamically updates the content—without refreshing the page.

Think of React Router like a metro system:

• 🚉 Each station is a route → Different pages in the app.
• 🚆 Navigation is seamless → Moving between pages without restarting the journey.
• 🎫 Tickets (URLs) keep track of location → React Router updates the URL as users move between pages.