M4: Routes & Navigation
Build a multi-page application with React Router v6, dynamic routes, and URL parameters.
Transform your single-page app into a multi-page experience with React Router! 🚀
Overview
Right now, your app is a single-page application (SPA) - everything happens on one URL. But real websites have multiple pages: home, details, about, etc.
React Router lets you create a multi-page feel while keeping the performance benefits of a SPA. Users can navigate between pages instantly without full page reloads!
In this module, you'll add:
- A home page (your existing listings page)
- A details page for each property
- A 404 Not Found page
- Smooth navigation between pages
What You'll Build
🏠 Multi-Page Application
Transform your app into multiple routes/pages
📄 Property Details Page
Show full information about a single property
❌ 404 Page
Handle invalid URLs gracefully
Key Concepts
Client-Side Routing
Traditional websites reload the entire page on navigation:
User clicks link → Browser requests new HTML → Full page reloadReact Router changes URLs without page reloads:
User clicks link → React Router updates URL → React renders new componentBenefits:
- ⚡ Instant navigation (no loading)
- 🎨 Smooth transitions
- 💾 Shared state between pages
- 📱 App-like experience
React Router Setup
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/property/:id" element={<PropertyDetailsPage />} />
<Route path="*" element={<NotFoundPage />} />
</Routes>
</BrowserRouter>
);
}URL Parameters
Extract dynamic values from URLs:
// URL: /property/abc123
import { useParams } from 'react-router-dom';
function PropertyDetailsPage() {
const { id } = useParams(); // id = "abc123"
// Fetch property with this id
useEffect(() => {
fetchProperty(id);
}, [id]);
}Navigation
Link component for navigation (like <a> tags but better):
import { Link } from 'react-router-dom';
<Link to="/property/abc123">View Details</Link>useNavigate hook for programmatic navigation:
import { useNavigate } from 'react-router-dom';
function Component() {
const navigate = useNavigate();
const handleClick = () => {
// Do something first
navigate('/property/abc123');
};
}Learning Objectives
Module Roadmap
| Lesson | What You'll Build | Concepts Introduced |
|---|---|---|
| 1-3 | Router setup | BrowserRouter, Routes, Route |
| 4 | Home route | Path and element props |
| 5-8 | Details page | useParams, dynamic routes, single item fetch |
| 9 | Navigation links | Link component |
| 10-11 | 404 page | Catch-all routes, error handling |
| 12-13 | Polish | useNavigate, breadcrumbs, UX |
Route Structure
By the end of this module, your app will have:
/ (root)
├─ HomePage
│ └─ Display all property listings
│
├─ /property/:id
│ └─ PropertyDetailsPage
│ └─ Show single property details
│
└─ * (catch-all)
└─ NotFoundPage
└─ 404 error messageExample URLs:
https://yourapp.com/ → HomePage
https://yourapp.com/property/abc123 → PropertyDetailsPage (id: abc123)
https://yourapp.com/invalid-page → NotFoundPagePrerequisites
Before starting Module 4, ensure:
- ✅ Completed Module 3
- ✅ HomePage fetches and displays listings from API
- ✅ Understand useEffect and async data fetching
- ✅ Comfortable with array methods (find, filter)
- ✅ PropertyCard component displays property information
React Router v6 Features
What's new in v6:
// ✅ v6 (Current) - Cleaner API
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
// ❌ v5 (Old) - More verbose
<Switch>
<Route path="/" component={Home} />
<Route path="/about" component={About} />
</Switch>Key improvements:
- Simpler
elementprop instead ofcomponent - Better TypeScript support
- Nested routes are cleaner
- Relative paths by default
- Better bundle size
Navigation Patterns
Declarative Navigation (Links)
Use when users click to navigate:
<Link to="/property/123">View Property</Link>Imperative Navigation (useNavigate)
Use for programmatic navigation after actions:
const navigate = useNavigate();
function handleSave() {
saveData();
navigate('/success');
}Navigation with State
Pass data to the next route:
navigate('/property/123', {
state: { from: 'search-results' }
});
// In PropertyDetailsPage:
const location = useLocation();
console.log(location.state.from); // 'search-results'Common Patterns
Protected Routes (Preview)
You'll implement this in Module 7:
function ProtectedRoute({ children }) {
const { user } = useAuth();
if (!user) {
return <Navigate to="/login" />;
}
return children;
}
<Route
path="/favorites"
element={
<ProtectedRoute>
<FavoritesPage />
</ProtectedRoute>
}
/>Layout Routes (Preview)
Share layout across multiple pages:
<Route element={<Layout />}>
<Route path="/" element={<HomePage />} />
<Route path="/about" element={<AboutPage />} />
<Route path="/contact" element={<ContactPage />} />
</Route>
function Layout() {
return (
<>
<Navbar />
<Outlet /> {/* Child routes render here */}
<Footer />
</>
);
}Property Details Page Preview
What it will show:
┌─────────────────────────────────────┐
│ ← Back to Listings │
├─────────────────────────────────────┤
│ [Image Carousel] │
├─────────────────────────────────────┤
│ Beach House Paradise │
│ ⭐ 4.8 · Miami, USA │
├─────────────────────────────────────┤
│ Description: │
│ Beautiful beachfront property... │
├─────────────────────────────────────┤
│ Amenities: │
│ • WiFi • Pool • Kitchen │
├─────────────────────────────────────┤
│ Price: $150/night │
│ Max Guests: 4 │
│ [Book Now Button] │
└─────────────────────────────────────┘URL Design Best Practices
Good URL patterns:
/- Homepage/properties- All properties/property/:id- Single property/favorites- User favorites/profile- User profile
Characteristics:
- Descriptive and readable
- RESTful conventions
- Predictable structure
- Easy to remember
Avoid these patterns:
/page1,/page2- Not descriptive/p?id=123- Query params for routes (use for filters instead)/propertyDetailsInformation- Too verbose/prop- Too abbreviated
Time Estimate
⏱️ 3-4 hours to complete all 13 lessons
- Lessons 1-4 (Router setup): ~45 minutes
- Lessons 5-8 (Details page): ~1.5 hours
- Lessons 9-11 (Navigation & 404): ~1 hour
- Lessons 12-13 (Polish & review): ~45 minutes
What Makes This Module Important
Professional applications need:
- Multiple pages for different content
- Shareable URLs for specific items
- Browser back/forward button support
- Bookmarkable pages
After this module, you'll understand:
- How SPAs handle routing
- URL parameters and dynamic routes
- Navigation best practices
- React Router patterns used in production
Let's Begin!
Ready to transform your single-page app into a multi-page experience? Let's start by installing React Router!