🚀 Lesson 6.2: Advanced Routing

🎯 The useParams Hook

The useParams hook is how you access dynamic route parameters in your components. It returns an object containing all parameter values from the current URL.

Basic useParams Usage

Here's how to use useParams to access route parameters:

import { useParams } from 'react-router-dom';

// Route definition: /users/:userId

function UserProfile() {
  // Get the userId from the URL
  const { userId } = useParams();
  
  return (
    <div>
      <h1>User Profile</h1>
      <p>Viewing profile for user: {userId}</p>
    </div>
  );
}

// When user navigates to /users/42
// userId will be "42"

const { userId } = useParams();
// userId is "42", not 42

// Convert to number if needed:
const userIdNumber = Number(userId);
// or
const userIdNumber = parseInt(userId, 10);

Typing useParams with TypeScript

TypeScript needs to know what parameters to expect. Here's how to type useParams properly:

import { useParams } from 'react-router-dom';

// Option 1: Define a type for your params
type UserParams = {
  userId: string;
};

function UserProfile() {
  const { userId } = useParams<UserParams>();
  // TypeScript knows userId is string | undefined
  
  // Handle the case where userId might be undefined
  if (!userId) {
    return <div>No user ID provided</div>;
  }
  
  return <div>User ID: {userId}</div>;
}

// Option 2: Inline type
function BlogPost() {
  const { postId } = useParams<{ postId: string }>();
  
  return <div>Post ID: {postId}</div>;
}

// Type returned by useParams
const params: Readonly<Params<string>>

// Which means each param is: string | undefined
const { userId } = useParams();
// userId: string | undefined

Multiple Parameters

Access multiple parameters from the same route:

import { useParams } from 'react-router-dom';

// Route: /blog/:year/:month/:slug

type BlogPostParams = {
  year: string;
  month: string;
  slug: string;
};

function BlogPost() {
  const { year, month, slug } = useParams<BlogPostParams>();
  
  // Validate and convert
  if (!year || !month || !slug) {
    return <div>Invalid blog post URL</div>;
  }
  
  const yearNum = parseInt(year, 10);
  const monthNum = parseInt(month, 10);
  
  return (
    <article>
      <h1>{slug.replace(/-/g, ' ')}</h1>
      <p>Published: {monthNum}/{yearNum}</p>
    </article>
  );
}

Practical Example: Product Detail Page

Let's build a complete example with data fetching based on route parameters:

import { useParams } from 'react-router-dom';
import { useState, useEffect } from 'react';

interface Product {
  id: number;
  name: string;
  price: number;
  description: string;
  imageUrl: string;
}

type ProductParams = {
  productId: string;
};

function ProductDetail() {
  const { productId } = useParams<ProductParams>();
  const [product, setProduct] = useState<Product | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  
  useEffect(() => {
    // Validate parameter
    if (!productId) {
      setError('No product ID provided');
      setLoading(false);
      return;
    }
    
    // Fetch product data
    const fetchProduct = async () => {
      try {
        const response = await fetch(
          `https://api.example.com/products/${productId}`
        );
        
        if (!response.ok) {
          throw new Error('Product not found');
        }
        
        const data = await response.json();
        setProduct(data);
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Failed to load product');
      } finally {
        setLoading(false);
      }
    };
    
    fetchProduct();
  }, [productId]);
  
  if (loading) {
    return <div>Loading product...</div>;
  }
  
  if (error) {
    return <div>Error: {error}</div>;
  }
  
  if (!product) {
    return <div>Product not found</div>;
  }
  
  return (
    <div className="product-detail">
      <img src={product.imageUrl} alt={product.name} />
      <h1>{product.name}</h1>
      <p className="price">${product.price.toFixed(2)}</p>
      <p>{product.description}</p>
    </div>
  );
}

🏋️ Exercise: User Profile with Tabs

type UserProfileParams = {
  userId: string;
  tab?: string;  // Optional parameter
};

const { userId, tab = 'overview' } = useParams<UserProfileParams>();

import { useParams } from 'react-router-dom';

type UserProfileParams = {
  userId: string;
  tab?: string;
};

// Mock user data
const users: Record<string, { name: string; email: string }> = {
  '1': { name: 'Alice Johnson', email: 'alice@example.com' },
  '2': { name: 'Bob Smith', email: 'bob@example.com' },
  '3': { name: 'Charlie Davis', email: 'charlie@example.com' },
};

function UserProfile() {
  const { userId, tab = 'overview' } = useParams<UserProfileParams>();
  
  // Validate userId
  if (!userId || !users[userId]) {
    return (
      <div>
        <h1>User Not Found</h1>
        <p>The user ID {userId} doesn't exist.</p>
      </div>
    );
  }
  
  const user = users[userId];
  
  // Render different content based on active tab
  const renderTabContent = () => {
    switch (tab) {
      case 'overview':
        return (
          <div>
            <h3>Overview</h3>
            <p>Email: {user.email}</p>
            <p>Member since: January 2024</p>
          </div>
        );
      
      case 'posts':
        return (
          <div>
            <h3>Posts</h3>
            <p>{user.name} hasn't posted anything yet.</p>
          </div>
        );
      
      case 'photos':
        return (
          <div>
            <h3>Photos</h3>
            <p>{user.name} hasn't uploaded any photos.</p>
          </div>
        );
      
      case 'settings':
        return (
          <div>
            <h3>Settings</h3>
            <p>Privacy settings and preferences.</p>
          </div>
        );
      
      default:
        return <p>Invalid tab: {tab}</p>;
    }
  };
  
  return (
    <div className="user-profile">
      <header>
        <h1>{user.name}</h1>
        <p>User ID: {userId}</p>
      </header>
      
      <nav className="profile-tabs">
        <a 
          href={`/users/${userId}/overview`}
          className={tab === 'overview' ? 'active' : ''}
        >
          Overview
        </a>
        <a 
          href={`/users/${userId}/posts`}
          className={tab === 'posts' ? 'active' : ''}
        >
          Posts
        </a>
        <a 
          href={`/users/${userId}/photos`}
          className={tab === 'photos' ? 'active' : ''}
        >
          Photos
        </a>
        <a 
          href={`/users/${userId}/settings`}
          className={tab === 'settings' ? 'active' : ''}
        >
          Settings
        </a>
      </nav>
      
      <main>
        {renderTabContent()}
      </main>
    </div>
  );
}

🧭 Programmatic Navigation with useNavigate

The useNavigate hook allows you to navigate to different routes programmatically in response to user actions or application logic, rather than through link clicks.

Basic useNavigate Usage

The useNavigate hook returns a navigation function:

import { useNavigate } from 'react-router-dom';

function LoginForm() {
  const navigate = useNavigate();
  
  const handleSubmit = async (event: React.FormEvent) => {
    event.preventDefault();
    
    // Perform login logic...
    const success = await performLogin();
    
    if (success) {
      // Navigate to dashboard after successful login
      navigate('/dashboard');
    }
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input type="email" name="email" />
      <input type="password" name="password" />
      <button type="submit">Login</button>
    </form>
  );
}

Navigation Options

The navigate function accepts several options:

import { useNavigate } from 'react-router-dom';

function MyComponent() {
  const navigate = useNavigate();
  
  // 1. Simple navigation to a path
  navigate('/about');
  
  // 2. Navigate with relative path
  navigate('../parent');  // Go up one level
  navigate('child');      // Go to child route
  
  // 3. Navigate with replace (replaces history entry)
  navigate('/login', { replace: true });
  
  // 4. Navigate backward/forward
  navigate(-1);  // Go back one page (like browser back)
  navigate(-2);  // Go back two pages
  navigate(1);   // Go forward one page
  
  // 5. Navigate with state
  navigate('/profile', { 
    state: { from: '/settings', userId: 42 } 
  });
}

The Replace Option

Using replace: true replaces the current history entry instead of adding a new one:

function RedirectExample() {
  const navigate = useNavigate();
  
  useEffect(() => {
    // Check authentication
    const isAuthenticated = checkAuth();
    
    if (!isAuthenticated) {
      // Replace current history entry
      // User can't go "back" to protected page
      navigate('/login', { replace: true });
    }
  }, [navigate]);
  
  return <div>Protected Content</div>;
}

Navigating with State

Pass data to the next route using the state option:

import { useNavigate } from 'react-router-dom';

function ProductList() {
  const navigate = useNavigate();
  
  const handleProductClick = (product: Product) => {
    // Navigate and pass product data
    navigate(`/products/${product.id}`, {
      state: { 
        product,
        fromPage: 'listing',
        searchQuery: 'laptops'
      }
    });
  };
  
  return (
    <div>
      {products.map(product => (
        <button 
          key={product.id}
          onClick={() => handleProductClick(product)}
        >
          {product.name}
        </button>
      ))}
    </div>
  );
}

Practical Example: Multi-Step Form

Here's a complete example showing programmatic navigation in a multi-step form:

import { useNavigate } from 'react-router-dom';
import { useState } from 'react';

interface FormData {
  step1: {
    email: string;
    password: string;
  };
  step2: {
    firstName: string;
    lastName: string;
  };
  step3: {
    address: string;
    city: string;
  };
}

function RegistrationStep1() {
  const navigate = useNavigate();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    
    // Validate
    if (!email || !password) {
      alert('Please fill all fields');
      return;
    }
    
    // Navigate to next step with data
    navigate('/register/step2', {
      state: {
        step1: { email, password }
      }
    });
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <h2>Step 1: Account Details</h2>
      
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
        required
      />
      
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
        required
      />
      
      <button type="submit">Next Step →</button>
    </form>
  );
}

function RegistrationStep2() {
  const navigate = useNavigate();
  const location = useLocation();
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  
  // Get data from previous step
  const previousData = location.state as { step1: FormData['step1'] };
  
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    
    // Navigate to next step with accumulated data
    navigate('/register/step3', {
      state: {
        ...previousData,
        step2: { firstName, lastName }
      }
    });
  };
  
  const handleBack = () => {
    // Go back but preserve data
    navigate(-1);
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <h2>Step 2: Personal Information</h2>
      
      <input
        type="text"
        value={firstName}
        onChange={(e) => setFirstName(e.target.value)}
        placeholder="First Name"
        required
      />
      
      <input
        type="text"
        value={lastName}
        onChange={(e) => setLastName(e.target.value)}
        placeholder="Last Name"
        required
      />
      
      <div className="button-group">
        <button type="button" onClick={handleBack}>
          ← Back
        </button>
        <button type="submit">
          Next Step →
        </button>
      </div>
    </form>
  );
}

🏋️ Exercise: Shopping Cart Checkout

interface CartItem {
  id: number;
  name: string;
  price: number;
  quantity: number;
}

interface CheckoutState {
  items: CartItem[];
  total: number;
}

interface OrderState extends CheckoutState {
  orderId: string;
  orderDate: string;
}

import { useNavigate, useLocation } from 'react-router-dom';
import { useState } from 'react';

interface CartItem {
  id: number;
  name: string;
  price: number;
  quantity: number;
}

interface CheckoutState {
  items: CartItem[];
  total: number;
}

// Cart Component
function Cart() {
  const navigate = useNavigate();
  const [items] = useState<CartItem[]>([
    { id: 1, name: 'Laptop', price: 999, quantity: 1 },
    { id: 2, name: 'Mouse', price: 29, quantity: 2 }
  ]);
  
  const total = items.reduce((sum, item) => 
    sum + (item.price * item.quantity), 0
  );
  
  const handleCheckout = () => {
    navigate('/checkout', {
      state: { items, total } as CheckoutState
    });
  };
  
  return (
    <div>
      <h1>Shopping Cart</h1>
      {items.map(item => (
        <div key={item.id}>
          {item.name} - ${item.price} x {item.quantity}
        </div>
      ))}
      <p>Total: ${total.toFixed(2)}</p>
      <button onClick={handleCheckout}>
        Proceed to Checkout
      </button>
    </div>
  );
}

// Checkout Component
function Checkout() {
  const navigate = useNavigate();
  const location = useLocation();
  const state = location.state as CheckoutState;
  
  if (!state || !state.items) {
    // Redirect if accessed directly
    navigate('/cart', { replace: true });
    return null;
  }
  
  const handlePayment = () => {
    // Simulate payment processing
    const orderId = `ORD-${Date.now()}`;
    
    navigate('/success', {
      replace: true, // Can't go back to checkout
      state: {
        ...state,
        orderId,
        orderDate: new Date().toISOString()
      }
    });
  };
  
  const handleBackToCart = () => {
    navigate('/cart');
  };
  
  return (
    <div>
      <h1>Checkout</h1>
      <h3>Order Summary</h3>
      {state.items.map(item => (
        <div key={item.id}>
          {item.name} - ${item.price} x {item.quantity}
        </div>
      ))}
      <p>Total: ${state.total.toFixed(2)}</p>
      
      <div className="button-group">
        <button onClick={handleBackToCart}>
          ← Back to Cart
        </button>
        <button onClick={handlePayment}>
          Complete Payment
        </button>
      </div>
    </div>
  );
}

// Success Component
function OrderSuccess() {
  const location = useLocation();
  const state = location.state as CheckoutState & {
    orderId: string;
    orderDate: string;
  };
  
  if (!state) {
    // Redirect if accessed directly
    navigate('/cart', { replace: true });
    return null;
  }
  
  return (
    <div>
      <h1>✅ Order Complete!</h1>
      <p>Order ID: {state.orderId}</p>
      <p>Date: {new Date(state.orderDate).toLocaleDateString()}</p>
      <p>Total: ${state.total.toFixed(2)}</p>
    </div>
  );
}

📍 The useLocation Hook

The useLocation hook gives you access to the current location object, which contains information about the current URL, state passed through navigation, and more.

Basic useLocation Usage

Access location information in your components:

import { useLocation } from 'react-router-dom';

function CurrentPath() {
  const location = useLocation();
  
  return (
    <div>
      <h3>Current Location Info</h3>
      <p>Pathname: {location.pathname}</p>
      <p>Search: {location.search}</p>
      <p>Hash: {location.hash}</p>
      <p>Key: {location.key}</p>
    </div>
  );
}

// Example URL: /products?category=electronics#reviews
// Pathname: /products
// Search: ?category=electronics
// Hash: #reviews

Accessing Navigation State

Retrieve state that was passed during navigation:

import { useLocation, useNavigate } from 'react-router-dom';

// Component that navigates WITH state
function ProductList() {
  const navigate = useNavigate();
  
  const handleProductClick = (productId: number) => {
    navigate(`/products/${productId}`, {
      state: { 
        fromPage: 'listing',
        category: 'electronics',
        scrollPosition: window.scrollY
      }
    });
  };
  
  return <div>{/* Product list */}</div>;
}

// Component that receives the state
interface LocationState {
  fromPage?: string;
  category?: string;
  scrollPosition?: number;
}

function ProductDetail() {
  const location = useLocation();
  const navigate = useNavigate();
  
  // Type assertion for the state
  const state = location.state as LocationState;
  
  const handleBack = () => {
    if (state?.fromPage === 'listing') {
      // Go back to listing
      navigate('/products', {
        state: { 
          scrollTo: state.scrollPosition 
        }
      });
    } else {
      // Default back behavior
      navigate(-1);
    }
  };
  
  return (
    <div>
      <button onClick={handleBack}>
        {state?.fromPage ? `← Back to ${state.fromPage}` : '← Back'}
      </button>
      {state?.category && (
        <p>Category: {state.category}</p>
      )}
    </div>
  );
}

Conditional Rendering Based on Location

Use location to render different UI based on the current route:

import { useLocation } from 'react-router-dom';

function Navigation() {
  const location = useLocation();
  
  // Highlight active navigation item
  const isActive = (path: string) => {
    return location.pathname === path;
  };
  
  // Check if we're in a specific section
  const inAdminSection = location.pathname.startsWith('/admin');
  
  return (
    <nav>
      <a 
        href="/" 
        className={isActive('/') ? 'active' : ''}
      >
        Home
      </a>
      
      <a 
        href="/products" 
        className={isActive('/products') ? 'active' : ''}
      >
        Products
      </a>
      
      <a 
        href="/about" 
        className={isActive('/about') ? 'active' : ''}
      >
        About
      </a>
      
      {inAdminSection && (
        <a href="/admin/dashboard">
          Admin Dashboard
        </a>
      )}
    </nav>
  );
}

Tracking Location Changes

React to location changes with useEffect:

import { useLocation } from 'react-router-dom';
import { useEffect } from 'react';

function PageTracker() {
  const location = useLocation();
  
  useEffect(() => {
    // Track page view
    console.log('Page view:', location.pathname);
    
    // Send analytics
    if (window.gtag) {
      window.gtag('config', 'GA_MEASUREMENT_ID', {
        page_path: location.pathname + location.search
      });
    }
    
    // Scroll to top on route change
    window.scrollTo(0, 0);
    
    // Or scroll to hash if present
    if (location.hash) {
      const element = document.querySelector(location.hash);
      element?.scrollIntoView({ behavior: 'smooth' });
    }
  }, [location]);
  
  return null; // This component doesn't render anything
}

Practical Example: Breadcrumbs

Build dynamic breadcrumbs based on the current location:

import { useLocation, Link } from 'react-router-dom';

function Breadcrumbs() {
  const location = useLocation();
  
  // Split pathname into segments
  const pathnames = location.pathname.split('/').filter(x => x);
  
  // Build breadcrumb items
  const breadcrumbs = pathnames.map((segment, index) => {
    // Build the path up to this segment
    const path = `/${pathnames.slice(0, index + 1).join('/')}`;
    
    // Format the segment name
    const name = segment
      .replace(/-/g, ' ')
      .replace(/\b\w/g, char => char.toUpperCase());
    
    return { path, name };
  });
  
  return (
    <nav aria-label="Breadcrumb">
      <ol className="breadcrumb">
        <li>
          <Link to="/">Home</Link>
        </li>
        
        {breadcrumbs.map((crumb, index) => {
          const isLast = index === breadcrumbs.length - 1;
          
          return (
            <li key={crumb.path}>
              {isLast ? (
                <span aria-current="page">{crumb.name}</span>
              ) : (
                <Link to={crumb.path}>{crumb.name}</Link>
              )}
            </li>
          );
        })}
      </ol>
    </nav>
  );
}

// Example usage:
// URL: /products/electronics/laptops
// Renders: Home > Products > Electronics > Laptops

Location with Authentication

Store and retrieve redirect paths for authentication flows:

import { useLocation, useNavigate } from 'react-router-dom';
import { useEffect } from 'react';

// Protected Route Component
function ProtectedRoute({ children }: { children: React.ReactNode }) {
  const location = useLocation();
  const navigate = useNavigate();
  const isAuthenticated = checkAuth(); // Your auth check
  
  useEffect(() => {
    if (!isAuthenticated) {
      // Redirect to login, storing the intended destination
      navigate('/login', {
        state: { from: location.pathname },
        replace: true
      });
    }
  }, [isAuthenticated, location, navigate]);
  
  return isAuthenticated ? <>{children}</> : null;
}

// Login Component
interface LoginLocationState {
  from?: string;
}

function Login() {
  const location = useLocation();
  const navigate = useNavigate();
  
  const state = location.state as LoginLocationState;
  const from = state?.from || '/dashboard';
  
  const handleLogin = async (credentials: LoginCredentials) => {
    const success = await performLogin(credentials);
    
    if (success) {
      // Navigate to the page they were trying to access
      navigate(from, { replace: true });
    }
  };
  
  return (
    <div>
      <h1>Login</h1>
      {state?.from && (
        <p>Please log in to access {state.from}</p>
      )}
      <LoginForm onSubmit={handleLogin} />
    </div>
  );
}

🏋️ Exercise: Return-to-Previous Functionality

interface NavigationState {
  from?: 'search' | 'category' | 'home';
  searchQuery?: string;
  categoryName?: string;
}

import { useLocation, useNavigate, Link } from 'react-router-dom';

interface NavigationState {
  from?: 'search' | 'category' | 'home';
  searchQuery?: string;
  categoryName?: string;
}

// Search Results Component
function SearchResults() {
  const [query] = useState('laptop');
  const products = [
    { id: 1, name: 'Gaming Laptop' },
    { id: 2, name: 'Business Laptop' }
  ];
  
  return (
    <div>
      <h1>Search Results for "{query}"</h1>
      {products.map(product => (
        <Link
          key={product.id}
          to={`/products/${product.id}`}
          state={{
            from: 'search',
            searchQuery: query
          } as NavigationState}
        >
          {product.name}
        </Link>
      ))}
    </div>
  );
}

// Category Component
function Category() {
  const categoryName = 'Electronics';
  const products = [
    { id: 1, name: 'Gaming Laptop' },
    { id: 3, name: 'Wireless Mouse' }
  ];
  
  return (
    <div>
      <h1>{categoryName}</h1>
      {products.map(product => (
        <Link
          key={product.id}
          to={`/products/${product.id}`}
          state={{
            from: 'category',
            categoryName
          } as NavigationState}
        >
          {product.name}
        </Link>
      ))}
    </div>
  );
}

// Product Detail Component
function ProductDetail() {
  const location = useLocation();
  const navigate = useNavigate();
  const { productId } = useParams<{ productId: string }>();
  
  const state = location.state as NavigationState;
  
  // Determine back button text and action
  const getBackButton = () => {
    if (state?.from === 'search') {
      return {
        text: `← Back to Search Results "${state.searchQuery}"`,
        path: `/search?q=${state.searchQuery}`
      };
    }
    
    if (state?.from === 'category') {
      return {
        text: `← Back to ${state.categoryName}`,
        path: `/categories/${state.categoryName?.toLowerCase()}`
      };
    }
    
    if (state?.from === 'home') {
      return {
        text: '← Back to Home',
        path: '/'
      };
    }
    
    // Default fallback
    return {
      text: '← Back',
      path: null // Will use navigate(-1)
    };
  };
  
  const backButton = getBackButton();
  
  const handleBack = () => {
    if (backButton.path) {
      navigate(backButton.path);
    } else {
      navigate(-1);
    }
  };
  
  return (
    <div>
      <button onClick={handleBack}>
        {backButton.text}
      </button>
      
      <h1>Product {productId}</h1>
      <p>Product details here...</p>
      
      {state?.from && (
        <p className="breadcrumb-info">
          You came from: {state.from}
        </p>
      )}
    </div>
  );
}

📝 Building a Blog with Advanced Routing

Let's put everything together by building a complete blog application that demonstrates nested routes, dynamic parameters, and programmatic navigation.

Blog Application Structure

Our blog will have the following route structure:

// Route structure:
/                          // Home page
/blog                      // Blog listing
/blog/:postId              // Individual post
/blog/category/:category   // Posts by category
/blog/author/:authorId     // Posts by author
/blog/edit/:postId         // Edit post
/blog/new                  // Create new post

Complete Blog Application

Here's the full implementation with all advanced routing features:

import { 
  BrowserRouter, 
  Routes, 
  Route, 
  Link,
  useParams,
  useNavigate,
  useLocation 
} from 'react-router-dom';
import { useState, useEffect } from 'react';

// Types
interface BlogPost {
  id: number;
  title: string;
  content: string;
  category: string;
  authorId: number;
  date: string;
}

interface Author {
  id: number;
  name: string;
}

// Mock data
const authors: Record<number, Author> = {
  1: { id: 1, name: 'Jane Smith' },
  2: { id: 2, name: 'John Doe' }
};

const mockPosts: BlogPost[] = [
  {
    id: 1,
    title: 'Getting Started with React Router',
    content: 'React Router is a powerful routing library...',
    category: 'React',
    authorId: 1,
    date: '2024-01-15'
  },
  {
    id: 2,
    title: 'TypeScript Best Practices',
    content: 'TypeScript helps us write safer code...',
    category: 'TypeScript',
    authorId: 2,
    date: '2024-01-20'
  },
  {
    id: 3,
    title: 'Advanced Hooks Patterns',
    content: 'Custom hooks are reusable pieces...',
    category: 'React',
    authorId: 1,
    date: '2024-01-25'
  }
];

// Blog Home - Shows all posts
function BlogHome() {
  const [posts] = useState<BlogPost[]>(mockPosts);
  
  // Get unique categories
  const categories = [...new Set(posts.map(p => p.category))];
  
  return (
    <div className="blog-home">
      <h1>📝 My Blog</h1>
      
      <nav className="category-nav">
        <h3>Categories</h3>
        {categories.map(category => (
          <Link 
            key={category}
            to={`/blog/category/${category}`}
          >
            {category}
          </Link>
        ))}
      </nav>
      
      <div className="posts-list">
        <h2>Recent Posts</h2>
        {posts.map(post => (
          <article key={post.id} className="post-preview">
            <h3>
              <Link 
                to={`/blog/${post.id}`}
                state={{ from: 'home' }}
              >
                {post.title}
              </Link>
            </h3>
            <p>{post.content.substring(0, 100)}...</p>
            <div className="post-meta">
              <span>{post.category}</span>
              <span>By {authors[post.authorId].name}</span>
              <span>{post.date}</span>
            </div>
          </article>
        ))}
      </div>
      
      <Link to="/blog/new" className="create-post-btn">
        ➕ Create New Post
      </Link>
    </div>
  );
}

// Individual Post View
function BlogPost() {
  const { postId } = useParams<{ postId: string }>();
  const location = useLocation();
  const navigate = useNavigate();
  const [post, setPost] = useState<BlogPost | null>(null);
  
  const state = location.state as { from?: string };
  
  useEffect(() => {
    if (!postId) return;
    
    const postIdNum = parseInt(postId, 10);
    const foundPost = mockPosts.find(p => p.id === postIdNum);
    setPost(foundPost || null);
  }, [postId]);
  
  if (!post) {
    return <div>Post not found</div>;
  }
  
  const author = authors[post.authorId];
  
  const handleEdit = () => {
    navigate(`/blog/edit/${post.id}`, {
      state: { post }
    });
  };
  
  const handleBack = () => {
    if (state?.from) {
      navigate(-1);
    } else {
      navigate('/blog');
    }
  };
  
  return (
    <article className="blog-post">
      <button onClick={handleBack}>← Back</button>
      
      <header>
        <h1>{post.title}</h1>
        <div className="post-meta">
          <Link to={`/blog/category/${post.category}`}>
            {post.category}
          </Link>
          <span> | </span>
          <Link to={`/blog/author/${post.authorId}`}>
            {author.name}
          </Link>
          <span> | {post.date}</span>
        </div>
      </header>
      
      <div className="post-content">
        {post.content}
      </div>
      
      <button onClick={handleEdit}>
        ✏️ Edit Post
      </button>
    </article>
  );
}

// Posts by Category
function CategoryPosts() {
  const { category } = useParams<{ category: string }>();
  const [posts, setPosts] = useState<BlogPost[]>([]);
  
  useEffect(() => {
    if (!category) return;
    
    const filtered = mockPosts.filter(
      p => p.category.toLowerCase() === category.toLowerCase()
    );
    setPosts(filtered);
  }, [category]);
  
  return (
    <div>
      <Link to="/blog">← Back to Blog</Link>
      
      <h1>Posts in {category}</h1>
      
      {posts.length === 0 ? (
        <p>No posts in this category yet.</p>
      ) : (
        <div className="posts-list">
          {posts.map(post => (
            <article key={post.id}>
              <h3>
                <Link 
                  to={`/blog/${post.id}`}
                  state={{ from: `category-${category}` }}
                >
                  {post.title}
                </Link>
              </h3>
              <p>{post.content.substring(0, 100)}...</p>
            </article>
          ))}
        </div>
      )}
    </div>
  );
}

// Edit Post
interface EditPostLocationState {
  post?: BlogPost;
}

function EditPost() {
  const { postId } = useParams<{ postId: string }>();
  const location = useLocation();
  const navigate = useNavigate();
  
  const state = location.state as EditPostLocationState;
  const [title, setTitle] = useState(state?.post?.title || '');
  const [content, setContent] = useState(state?.post?.content || '');
  
  useEffect(() => {
    // If no state, fetch the post
    if (!state?.post && postId) {
      const postIdNum = parseInt(postId, 10);
      const post = mockPosts.find(p => p.id === postIdNum);
      if (post) {
        setTitle(post.title);
        setContent(post.content);
      }
    }
  }, [postId, state]);
  
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    
    // Save post logic here
    console.log('Saving post:', { title, content });
    
    // Navigate back to post with success message
    navigate(`/blog/${postId}`, {
      state: { message: 'Post updated successfully!' }
    });
  };
  
  return (
    <div className="edit-post">
      <h1>Edit Post</h1>
      
      <form onSubmit={handleSubmit}>
        <div>
          <label>Title</label>
          <input
            type="text"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            required
          />
        </div>
        
        <div>
          <label>Content</label>
          <textarea
            value={content}
            onChange={(e) => setContent(e.target.value)}
            rows={10}
            required
          />
        </div>
        
        <div className="button-group">
          <button 
            type="button"
            onClick={() => navigate(-1)}
          >
            Cancel
          </button>
          <button type="submit">
            Save Changes
          </button>
        </div>
      </form>
    </div>
  );
}

// App with all routes
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/blog" element={<BlogHome />} />
        <Route path="/blog/:postId" element={<BlogPost />} />
        <Route path="/blog/category/:category" element={<CategoryPosts />} />
        <Route path="/blog/edit/:postId" element={<EditPost />} />
      </Routes>
    </BrowserRouter>
  );
}

🎨 Advanced Patterns and Techniques

Now that we've covered the core hooks, let's explore some advanced patterns and techniques for building sophisticated routing solutions.

Combining All Three Hooks

Often, you'll use useParams, useNavigate, and useLocation together for complex navigation scenarios:

import { useParams, useNavigate, useLocation } from 'react-router-dom';

interface ProductDetailState {
  from?: string;
  category?: string;
  filters?: Record<string, string>;
}

function ProductDetail() {
  const { productId } = useParams<{ productId: string }>();
  const navigate = useNavigate();
  const location = useLocation();
  
  const state = location.state as ProductDetailState;
  const [product, setProduct] = useState<Product | null>(null);
  
  // Fetch product using params
  useEffect(() => {
    if (!productId) return;
    
    fetchProduct(productId).then(setProduct);
  }, [productId]);
  
  // Handle adding to cart with navigation
  const handleAddToCart = () => {
    addToCart(product);
    
    // Navigate to cart, preserving where they came from
    navigate('/cart', {
      state: {
        from: location.pathname,
        returnTo: state?.from || '/products'
      }
    });
  };
  
  // Smart back button using location state
  const handleBack = () => {
    if (state?.from === 'search' && state?.filters) {
      // Return to search with filters
      const params = new URLSearchParams(state.filters);
      navigate(`/search?${params.toString()}`);
    } else if (state?.category) {
      // Return to category
      navigate(`/category/${state.category}`);
    } else {
      // Default back
      navigate(-1);
    }
  };
  
  if (!product) {
    return <div>Loading...</div>;
  }
  
  return (
    <div>
      <button onClick={handleBack}>
        {state?.from ? `← Back to ${state.from}` : '← Back'}
      </button>
      
      <h1>{product.name}</h1>
      <p>${product.price}</p>
      
      <button onClick={handleAddToCart}>
        Add to Cart
      </button>
    </div>
  );
}

Type-Safe Route Parameters

Create a centralized route configuration with TypeScript to ensure type safety across your app:

// routes.ts - Centralized route definitions
export const ROUTES = {
  home: '/',
  products: {
    list: '/products',
    detail: (id: number | string) => `/products/${id}`,
    edit: (id: number | string) => `/products/${id}/edit`,
    category: (category: string) => `/products/category/${category}`,
  },
  user: {
    profile: (userId: number | string) => `/users/${userId}`,
    settings: '/settings',
  },
  blog: {
    list: '/blog',
    post: (postId: number | string) => `/blog/${postId}`,
    category: (category: string) => `/blog/category/${category}`,
    author: (authorId: number | string) => `/blog/author/${authorId}`,
  }
} as const;

// Usage in components
import { ROUTES } from './routes';
import { useNavigate } from 'react-router-dom';

function ProductList() {
  const navigate = useNavigate();
  
  const handleProductClick = (productId: number) => {
    // Type-safe navigation
    navigate(ROUTES.products.detail(productId));
  };
  
  return (
    <div>
      <Link to={ROUTES.products.list}>All Products</Link>
      <Link to={ROUTES.products.category('electronics')}>
        Electronics
      </Link>
    </div>
  );
}

Custom Navigation Hook

Create a custom hook that wraps useNavigate with common navigation patterns:

import { useNavigate, NavigateOptions } from 'react-router-dom';
import { useCallback } from 'react';

interface NavigationState {
  from?: string;
  [key: string]: unknown;
}

export function useAppNavigation() {
  const navigate = useNavigate();
  
  // Navigate with automatic "from" tracking
  const navigateTo = useCallback((
    path: string, 
    state?: NavigationState,
    options?: NavigateOptions
  ) => {
    navigate(path, {
      ...options,
      state: {
        from: window.location.pathname,
        ...state
      }
    });
  }, [navigate]);
  
  // Navigate back with fallback
  const navigateBack = useCallback((fallbackPath: string = '/') => {
    if (window.history.length > 1) {
      navigate(-1);
    } else {
      navigate(fallbackPath);
    }
  }, [navigate]);
  
  // Navigate and scroll to top
  const navigateAndScroll = useCallback((
    path: string,
    state?: NavigationState
  ) => {
    navigate(path, { state });
    window.scrollTo(0, 0);
  }, [navigate]);
  
  // Replace current route (for redirects)
  const redirect = useCallback((path: string) => {
    navigate(path, { replace: true });
  }, [navigate]);
  
  return {
    navigateTo,
    navigateBack,
    navigateAndScroll,
    redirect,
    navigate // Still expose raw navigate if needed
  };
}

// Usage
function MyComponent() {
  const { navigateTo, navigateBack } = useAppNavigation();
  
  const handleAction = () => {
    // Automatically tracks "from" location
    navigateTo('/products/123', {
      category: 'electronics'
    });
  };
  
  return (
    <div>
      <button onClick={handleAction}>View Product</button>
      <button onClick={() => navigateBack('/home')}>
        Back
      </button>
    </div>
  );
}

Route Parameter Validation

Validate and parse route parameters with a custom hook:

import { useParams, useNavigate } from 'react-router-dom';
import { useEffect } from 'react';

// Generic parameter validator
function useValidatedParams<T extends Record<string, unknown>>(
  validators: {
    [K in keyof T]: (value: string | undefined) => T[K] | null;
  }
): T | null {
  const params = useParams();
  const navigate = useNavigate();
  
  const validated = Object.entries(validators).reduce(
    (acc, [key, validator]) => {
      const value = params[key];
      const validated = validator(value);
      
      if (validated === null) {
        return null;
      }
      
      return { ...acc, [key]: validated };
    },
    {} as T | null
  );
  
  useEffect(() => {
    if (validated === null) {
      // Redirect on invalid params
      navigate('/404', { replace: true });
    }
  }, [validated, navigate]);
  
  return validated;
}

// Validator functions
const validators = {
  productId: (value: string | undefined): number | null => {
    if (!value) return null;
    const num = parseInt(value, 10);
    return !isNaN(num) && num > 0 ? num : null;
  },
  
  userId: (value: string | undefined): number | null => {
    if (!value) return null;
    const num = parseInt(value, 10);
    return !isNaN(num) && num > 0 ? num : null;
  },
  
  slug: (value: string | undefined): string | null => {
    if (!value) return null;
    // Validate slug format: lowercase, hyphens, alphanumeric
    return /^[a-z0-9-]+$/.test(value) ? value : null;
  }
};

// Usage
interface ProductParams {
  productId: number;
  slug: string;
}

function ProductDetail() {
  const params = useValidatedParams<ProductParams>({
    productId: validators.productId,
    slug: validators.slug
  });
  
  if (!params) {
    return null; // Will redirect to 404
  }
  
  // TypeScript knows productId is number and slug is string
  return (
    <div>
      <h1>Product {params.productId}</h1>
      <p>Slug: {params.slug}</p>
    </div>
  );
}

Navigation Guards

Implement navigation guards to control access to routes:

import { useLocation, useNavigate } from 'react-router-dom';
import { useEffect } from 'react';

interface GuardOptions {
  requireAuth?: boolean;
  requireRole?: string[];
  redirectTo?: string;
}

function useNavigationGuard(options: GuardOptions) {
  const location = useLocation();
  const navigate = useNavigate();
  
  useEffect(() => {
    const checkAccess = () => {
      // Check authentication
      if (options.requireAuth) {
        const isAuthenticated = checkAuth(); // Your auth check
        
        if (!isAuthenticated) {
          navigate(options.redirectTo || '/login', {
            state: { from: location.pathname },
            replace: true
          });
          return false;
        }
      }
      
      // Check roles
      if (options.requireRole) {
        const userRole = getUserRole(); // Your role check
        
        if (!options.requireRole.includes(userRole)) {
          navigate('/unauthorized', { replace: true });
          return false;
        }
      }
      
      return true;
    };
    
    checkAccess();
  }, [location, navigate, options]);
}

// Usage
function AdminDashboard() {
  useNavigationGuard({
    requireAuth: true,
    requireRole: ['admin', 'moderator'],
    redirectTo: '/login'
  });
  
  return <div>Admin Dashboard</div>;
}

function UserProfile() {
  useNavigationGuard({
    requireAuth: true,
    redirectTo: '/login'
  });
  
  return <div>User Profile</div>;
}

Breadcrumb Hook

Create a reusable breadcrumb hook:

import { useLocation } from 'react-router-dom';
import { useMemo } from 'react';

interface Breadcrumb {
  path: string;
  label: string;
  isLast: boolean;
}

// Route label mapping
const routeLabels: Record<string, string> = {
  '/products': 'Products',
  '/users': 'Users',
  '/settings': 'Settings',
  '/blog': 'Blog',
  '/admin': 'Administration',
  '/dashboard': 'Dashboard'
};

function useBreadcrumbs(): Breadcrumb[] {
  const location = useLocation();
  
  const breadcrumbs = useMemo(() => {
    const pathnames = location.pathname.split('/').filter(x => x);
    
    if (pathnames.length === 0) {
      return [];
    }
    
    return pathnames.map((segment, index) => {
      const path = `/${pathnames.slice(0, index + 1).join('/')}`;
      const isLast = index === pathnames.length - 1;
      
      // Try to get custom label, or format the segment
      const label = routeLabels[path] || 
        segment
          .replace(/-/g, ' ')
          .replace(/\b\w/g, char => char.toUpperCase());
      
      return { path, label, isLast };
    });
  }, [location.pathname]);
  
  return breadcrumbs;
}

// Usage
function BreadcrumbNav() {
  const breadcrumbs = useBreadcrumbs();
  
  if (breadcrumbs.length === 0) {
    return null;
  }
  
  return (
    <nav className="breadcrumb">
      <Link to="/">Home</Link>
      {breadcrumbs.map(crumb => (
        <span key={crumb.path}>
          <span className="separator"> / </span>
          {crumb.isLast ? (
            <span>{crumb.label}</span>
          ) : (
            <Link to={crumb.path}>{crumb.label}</Link>
          )}
        </span>
      ))}
    </nav>
  );
}

🏋️ Exercise: Advanced Blog Navigation

// routes.ts
export const ROUTES = {
  home: '/',
  blog: {
    home: '/blog',
    post: (id: number | string) => `/blog/${id}`,
    category: (cat: string) => `/blog/category/${cat}`,
    edit: (id: number | string) => `/blog/edit/${id}`,
    new: '/blog/new'
  }
} as const;

// useBlogNavigation.ts
export function useBlogNavigation() {
  const navigate = useNavigate();
  const location = useLocation();
  
  const toPost = useCallback((
    postId: number, 
    from?: string
  ) => {
    navigate(ROUTES.blog.post(postId), {
      state: { from: from || location.pathname }
    });
  }, [navigate, location]);
  
  const toCategory = useCallback((category: string) => {
    navigate(ROUTES.blog.category(category));
  }, [navigate]);
  
  const toEdit = useCallback((postId: number) => {
    navigate(ROUTES.blog.edit(postId));
  }, [navigate]);
  
  return { toPost, toCategory, toEdit };
}

// useValidatedPostId.ts
function useValidatedPostId(): number | null {
  const { postId } = useParams<{ postId: string }>();
  const navigate = useNavigate();
  
  const validated = useMemo(() => {
    if (!postId) return null;
    const num = parseInt(postId, 10);
    return !isNaN(num) && num > 0 ? num : null;
  }, [postId]);
  
  useEffect(() => {
    if (validated === null) {
      navigate('/blog', { replace: true });
    }
  }, [validated, navigate]);
  
  return validated;
}

// BlogPost.tsx
function BlogPost() {
  const postId = useValidatedPostId();
  const { toEdit } = useBlogNavigation();
  
  if (!postId) return null;
  
  return (
    <article>
      <BlogBreadcrumbs />
      <h1>Post {postId}</h1>
      <button onClick={() => toEdit(postId)}>
        Edit
      </button>
    </article>
  );
}

// BlogBreadcrumbs.tsx
function BlogBreadcrumbs() {
  const location = useLocation();
  const segments = location.pathname.split('/').filter(x => x);
  
  return (
    <nav>
      <Link to={ROUTES.home}>Home</Link>
      {segments.map((seg, i) => (
        <span key={i}>
          {' / '}
          <Link to={`/${segments.slice(0, i + 1).join('/')}`}>
            {seg}
          </Link>
        </span>
      ))}
    </nav>
  );
}

// EditPost.tsx
function EditPost() {
  const postId = useValidatedPostId();
  
  // Navigation guard
  useEffect(() => {
    const canEdit = checkEditPermissions(postId);
    if (!canEdit) {
      navigate('/unauthorized', { replace: true });
    }
  }, [postId]);
  
  if (!postId) return null;
  
  return <div>Edit Post {postId}</div>;
}

🎯 Summary and Next Steps

What You've Learned

In this lesson, you've mastered advanced React Router concepts:

Quick Reference

Common Patterns Cheat Sheet

// Pattern 1: Get URL parameter
const { userId } = useParams<{ userId: string }>();

// Pattern 2: Navigate after action
const navigate = useNavigate();
const handleSubmit = () => {
  // ... save data
  navigate('/success');
};

// Pattern 3: Navigate with state
navigate('/products/123', {
  state: { from: 'search', query: 'laptop' }
});

// Pattern 4: Navigate with replace
navigate('/login', { replace: true });

// Pattern 5: Go back
navigate(-1);

// Pattern 6: Access location state
const location = useLocation();
const state = location.state as MyStateType;

// Pattern 7: Conditional back button
const handleBack = () => {
  if (state?.from) {
    navigate(state.from);
  } else {
    navigate(-1);
  }
};

// Pattern 8: Validate parameters
const postId = parseInt(useParams().postId || '', 10);
if (isNaN(postId)) {
  navigate('/404', { replace: true });
}

Best Practices Checklist

Common Gotchas

const { userId } = useParams();
// userId is "42", not 42
const userIdNum = parseInt(userId || '0', 10);

// ❌ Don't rely on this after refresh
const state = location.state;

// ✅ Always have a fallback
const userId = state?.userId || fetchFromUrl();

// Route: /users/:userId/:tab?
const { tab = 'overview' } = useParams();
// Provide default for optional params

// ❌ Don't do this
if (!user) navigate('/login');

// ✅ Use useEffect
useEffect(() => {
  if (!user) navigate('/login');
}, [user]);

Practice Projects

Solidify your understanding with these practice projects:

1. E-commerce Product Catalog
   • Product listing with category filters
   • Product detail pages with dynamic routes
   • Shopping cart with navigation state
   • Checkout flow with multi-step navigation
2. User Dashboard
   • User profile with tabbed navigation
   • Settings pages with nested routes
   • Activity feed with pagination in URL
   • Smart breadcrumbs
3. Documentation Site
   • Hierarchical documentation structure
   • Search with URL query parameters
   • Version selection in routes
   • Previous/next page navigation

Next Lesson Preview

Additional Resources

• React Router: useParams Documentation
• React Router: useNavigate Documentation
• React Router: useLocation Documentation
• TypeScript: Type Narrowing
• React: Context (for comparison with routing state)