Lesson 7 • Intermediate

React Router ⚛️

Add multi-page navigation to your React app — define routes, handle dynamic URLs, and protect pages with authentication guards.

What You'll Learn in This Lesson

• Setting up React Router with BrowserRouter
• Link, NavLink, and programmatic navigation
• Dynamic routes with useParams
• Query parameters with useSearchParams
• Nested routes, Outlet, and protected routes

Running Code Locally: Our editor simulates routing logic. For real routing, install react-router-dom in a Vite project.

🎯 Real-World Analogy: React Router is like a GPS navigator. The routes are the map (which URL goes where), Link is the steering wheel (how you navigate), useParams reads the road signs (URL data), and ProtectedRoute is a toll booth (checks your pass before letting you through).

1️⃣ Setup & Basic Routes

React Router maps URL paths to components. Wrap your app in BrowserRouter, then define routes with <Route path="..." element={<Component />} />. Use path="*" for a 404 page.

Try It: Basic Routing

Set up routes and see how URL matching works

Try it Yourself »

JavaScript

// React Router — Setup & Basic Routes
console.log("=== Installing React Router ===");
console.log("npm install react-router-dom");
console.log();

console.log("=== Basic Setup (main.jsx) ===");
console.log("import { BrowserRouter } from 'react-router-dom';");
console.log();
console.log("ReactDOM.createRoot(root).render(");
console.log("  <BrowserRouter>");
console.log("    <App />");
console.log("  </BrowserRouter>");
console.log(");");
console.log();

console.log("=== Defining Routes (App.jsx)
...

2️⃣ Navigation

Use Link instead of <a> tags for client-side navigation. NavLink adds active styling automatically, and useNavigate enables programmatic redirects (e.g., after login).

Try It: Navigation

Link, NavLink with active styles, and programmatic navigation

Try it Yourself »

JavaScript

// Navigation — Link, NavLink, useNavigate
console.log("=== Link Component ===");
console.log("// DON'T use <a> tags — they cause full page reload!");
console.log('❌ <a href="/about">About</a>');
console.log('✅ <Link to="/about">About</Link>');
console.log();

console.log("=== NavLink — Active Styling ===");
console.log("// NavLink adds 'active' class automatically");
console.log("<NavLink");
console.log("  to='/about'");
console.log("  className={({ isActive }) =>");
console.log("    isActive ?
...

3️⃣ Dynamic Routes & Parameters

Dynamic segments like :userId capture values from the URL. Read them with useParams(). For query strings (?q=react), use useSearchParams().

Try It: Dynamic Routes

URL parameters and query strings

Try it Yourself »

JavaScript

// Dynamic Routes & URL Parameters
console.log("=== Dynamic Segments ===");
console.log("// URL parameters with :paramName");
console.log("<Route path='/users/:userId' element={<UserProfile />} />");
console.log("<Route path='/products/:category/:id' element={<Product />} />");
console.log();

console.log("=== Reading URL Params (useParams) ===");
console.log("import { useParams } from 'react-router-dom';");
console.log();
console.log("function UserProfile() {");
console.log("  const { userId } 
...

4️⃣ Nested & Protected Routes

Nested routes let you share layout across pages using Outlet. Protected routes check authentication before rendering — redirecting unauthenticated users to the login page.

Try It: Nested & Protected Routes

Layout sharing and auth guards

Try it Yourself »

JavaScript

// Nested Routes & Protected Routes
console.log("=== Nested Routes ===");
console.log("// Parent route with <Outlet /> for child content");
console.log();
console.log("<Route path='/dashboard' element={<DashboardLayout />}>");
console.log("  <Route index element={<DashboardHome />} />");
console.log("  <Route path='settings' element={<Settings />} />");
console.log("  <Route path='profile' element={<Profile />} />");
console.log("</Route>");
console.log();
console.log("// DashboardLayout.jsx:");
...

⚠️ Common Mistakes

⚠️

Using <a> instead of Link — Regular anchor tags cause full page reloads, losing all React state.

⚠️

Forgetting Outlet — Nested routes won't render child content without an Outlet in the parent layout.

💡

Pro Tip: Use navigate('/path', { replace: true }) after login so users can't "back" into the login page.

📋 Quick Reference

Feature	Syntax
Route	<Route path="/about" element={<About />} />
Link	<Link to="/about">About</Link>
URL param	const { id } = useParams()
Navigate	const navigate = useNavigate()
Outlet	<Outlet /> in parent layout

🎉 Lesson Complete!

You can now build multi-page React apps with routing, dynamic URLs, and protected pages. Next, let's put everything together in a complete project!

React Router ⚛️

What You'll Learn in This Lesson

1️⃣ Setup & Basic Routes

Try It: Basic Routing

2️⃣ Navigation

Try It: Navigation

3️⃣ Dynamic Routes & Parameters

Try It: Dynamic Routes

4️⃣ Nested & Protected Routes

Try It: Nested & Protected Routes

⚠️ Common Mistakes

📋 Quick Reference

🎉 Lesson Complete!

Cookie & Privacy Settings