Chapter 13: React Router (v6+)

React Router (v6+) — this is the chapter where your app finally becomes a real multi-page application! No more single page with everything crammed in one component — now we’ll have proper navigation, URLs, dynamic pages, nested layouts, and all the modern routing goodness that React Router v6+ brings.

We’ll go very slowly and clearly, like I’m sitting next to you in Mumbai showing you live on the screen. Every example is complete and ready to copy-paste!

1. Setting Up React Router (v6+)

First, install the latest version:

Important: We use v6+ (the current standard in 2026). The API is much cleaner than v5.

2. Basic Setup: BrowserRouter, Routes, Route

The root of your app should wrap everything with <BrowserRouter>.

Update src/main.tsx:

Now, in src/App.tsx, we define our routes:

Create simple page components in src/pages/:

(Do the same for About.tsx, Contact.tsx, and NotFound.tsx with different messages.)

Now run the app — you can navigate by typing in the URL:

• http://localhost:5173/ → Home
• http://localhost:5173/about → About
• http://localhost:5173/anything → 404 page

3. Link vs NavLink – Navigation Without Page Reload

We never use <a href=”/about”> — that causes full page reload. Instead we use Link or NavLink.

Create a simple Navbar: src/components/Navbar.tsx

Update App.tsx to include the navbar:

Link vs NavLink:

• Link → simple navigation
• NavLink → adds isActive prop so you can style active links (very common for navbars)

4. Dynamic Routes & URL Parameters (useParams)

Let’s create a User Profile page with dynamic URL: /users/123

Update App.tsx:

Create src/pages/UserProfile.tsx

Now go to /users/42 → you’ll see “Viewing user with ID: 42”

5. Nested Routes (Layouts & Children)

Real apps often have shared layouts (sidebar + header) with pages inside.

Create a layout: src/layouts/MainLayout.tsx

Update App.tsx to use nested routes:

Now all pages (except 404) share the navbar + footer!

6. useNavigate – Programmatic Navigation

useNavigate lets you navigate from code (after form submit, button click, etc.)

Example in Contact.tsx:

7. useSearchParams – Reading & Setting URL Query Strings

Example: Search page with query ?q=react

Add route: <Route path=”/search” element={<Search />} />

Now go to /search?q=react → input is filled, URL updates live!

Summary – Chapter 13 Key Takeaways

• Wrap app in <BrowserRouter>
• Use <Routes> + <Route path=”…” element={<Component />} />
• <Link> for simple links, <NavLink> for active styling
• Dynamic routes: path=”/users/:id” → useParams()
• Nested routes + <Outlet /> for layouts
• useNavigate() for programmatic navigation
• useSearchParams() for query strings

Mini Homework

1. Create a small app with:
   • Navbar
   • Home, About, Contact pages
   • /users/:id dynamic user page
   • /search page with query params
2. Bonus: Add a “Go to random user” button that uses useNavigate