Skip to main content

Chapter 8: Routing & Navigation - Building Single-Page Applications with React Router

Welcome to the comprehensive guide to React routing and navigation! In this chapter, we'll explore how to build sophisticated single-page applications with proper routing, navigation, and state management using React Router.

Learning Objectives​

By the end of this chapter, you will understand:

  • What React Router is and why it's essential for single-page applications
  • How to implement basic and advanced routing with React Router v6
  • Why different routing patterns exist and when to use each one
  • What navigation guards and protected routes are and how to implement them
  • How to handle dynamic routing and URL parameters effectively
  • What nested routing and layout patterns are and how to structure complex applications
  • Why SEO-friendly routing matters and how to implement it

What is React Router? The Foundation of Single-Page Applications​

What is React Router?​

React Router is the standard routing library for React applications. It enables you to build single-page applications (SPAs) with client-side routing, allowing users to navigate between different views without full page reloads.

React Router is what transforms your React application from a simple component tree into a full-featured single-page application with proper navigation and URL management.

What Problems Does React Router Solve?​

React Router addresses several key challenges in single-page applications:

  1. URL Management: Maintains browser history and enables bookmarkable URLs
  2. Navigation: Provides programmatic and declarative navigation between views
  3. State Persistence: Preserves application state during navigation
  4. SEO Optimization: Enables server-side rendering and SEO-friendly URLs
  5. User Experience: Provides familiar browser navigation (back/forward buttons)
  6. Code Organization: Separates different views into distinct routes

What Makes React Router Powerful?​

React Router provides several key benefits:

  1. Declarative Routing: Define routes using JSX components
  2. Nested Routing: Support for complex route hierarchies
  3. Dynamic Routing: Handle URL parameters and query strings
  4. Route Guards: Protect routes with authentication and authorization
  5. Code Splitting: Integrate with lazy loading for performance
  6. TypeScript Support: Full TypeScript support for type safety

How to Implement Basic Routing? The Technical Implementation​

How to Set Up React Router?​

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

// Basic page components
function Home() {
  return (
    <div>
      <h1>Home Page</h1>
      <p>Welcome to our website! This is the home page.</p>
    </div>
  );
}

function About() {
  return (
    <div>
      <h1>About Page</h1>
      <p>Learn more about our company and mission.</p>
    </div>
  );
}

function Contact() {
  return (
    <div>
      <h1>Contact Page</h1>
      <p>Get in touch with us through our contact form.</p>
    </div>
  );
}

function NotFound() {
  return (
    <div>
      <h1>404 - Page Not Found</h1>
      <p>The page you're looking for doesn't exist.</p>
    </div>
  );
}

// Navigation component
function Navigation() {
  return (
    <nav style={{ 
      backgroundColor: '#f8f9fa', 
      padding: '1rem',
      borderBottom: '1px solid #dee2e6'
    }}>
      <ul style={{ 
        listStyle: 'none', 
        display: 'flex', 
        gap: '1rem', 
        margin: 0, 
        padding: 0 
      }}>
        <li>
          <Link 
            to="/" 
            style={{ 
              textDecoration: 'none', 
              color: '#007bff',
              fontWeight: 'bold'
            }}
          >
            Home
          </Link>
        </li>
        <li>
          <Link 
            to="/about" 
            style={{ 
              textDecoration: 'none', 
              color: '#007bff',
              fontWeight: 'bold'
            }}
          >
            About
          </Link>
        </li>
        <li>
          <Link 
            to="/contact" 
            style={{ 
              textDecoration: 'none', 
              color: '#007bff',
              fontWeight: 'bold'
            }}
          >
            Contact
          </Link>
        </li>
      </ul>
    </nav>
  );
}

// Main app component
function App() {
  return (
    <Router>
      <div>
        <Navigation />
        <main style={{ padding: '2rem' }}>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/contact" element={<Contact />} />
            <Route path="*" element={<NotFound />} />
          </Routes>
        </main>
      </div>
    </Router>
  );
}

export default App;

How to Implement Dynamic Routing with URL Parameters?​

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

// Mock data
const users = [
  { id: 1, name: 'John Doe', email: '[email protected]', role: 'admin' },
  { id: 2, name: 'Jane Smith', email: '[email protected]', role: 'user' },
  { id: 3, name: 'Bob Johnson', email: '[email protected]', role: 'user' }
];

const posts = [
  { id: 1, title: 'Getting Started with React', author: 'John Doe', content: 'React is a powerful library...' },
  { id: 2, title: 'Advanced React Patterns', author: 'Jane Smith', content: 'Learn advanced patterns...' },
  { id: 3, title: 'React Performance Tips', author: 'Bob Johnson', content: 'Optimize your React apps...' }
];

// User list component
function UserList() {
  return (
    <div>
      <h2>Users</h2>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            <Link to={`/users/${user.id}`}>
              {user.name} ({user.role})
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

// User detail component
function UserDetail() {
  const { userId } = useParams();
  const navigate = useNavigate();
  const [user, setUser] = useState(null);

  useEffect(() => {
    const foundUser = users.find(u => u.id === parseInt(userId));
    if (foundUser) {
      setUser(foundUser);
    } else {
      navigate('/users');
    }
  }, [userId, navigate]);

  if (!user) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <button onClick={() => navigate('/users')}>← Back to Users</button>
      <h2>User Details</h2>
      <div>
        <p><strong>Name:</strong> {user.name}</p>
        <p><strong>Email:</strong> {user.email}</p>
        <p><strong>Role:</strong> {user.role}</p>
      </div>
    </div>
  );
}

// Post list component
function PostList() {
  return (
    <div>
      <h2>Posts</h2>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <Link to={`/posts/${post.id}`}>
              {post.title} by {post.author}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

// Post detail component
function PostDetail() {
  const { postId } = useParams();
  const navigate = useNavigate();
  const [post, setPost] = useState(null);

  useEffect(() => {
    const foundPost = posts.find(p => p.id === parseInt(postId));
    if (foundPost) {
      setPost(foundPost);
    } else {
      navigate('/posts');
    }
  }, [postId, navigate]);

  if (!post) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <button onClick={() => navigate('/posts')}>← Back to Posts</button>
      <h2>{post.title}</h2>
      <p><em>By {post.author}</em></p>
      <div>{post.content}</div>
    </div>
  );
}

// Navigation component
function Navigation() {
  const location = useLocation();
  
  return (
    <nav style={{ 
      backgroundColor: '#f8f9fa', 
      padding: '1rem',
      borderBottom: '1px solid #dee2e6'
    }}>
      <ul style={{ 
        listStyle: 'none', 
        display: 'flex', 
        gap: '1rem', 
        margin: 0, 
        padding: 0 
      }}>
        <li>
          <Link 
            to="/" 
            style={{ 
              textDecoration: 'none', 
              color: location.pathname === '/' ? '#0056b3' : '#007bff',
              fontWeight: location.pathname === '/' ? 'bold' : 'normal'
            }}
          >
            Home
          </Link>
        </li>
        <li>
          <Link 
            to="/users" 
            style={{ 
              textDecoration: 'none', 
              color: location.pathname.startsWith('/users') ? '#0056b3' : '#007bff',
              fontWeight: location.pathname.startsWith('/users') ? 'bold' : 'normal'
            }}
          >
            Users
          </Link>
        </li>
        <li>
          <Link 
            to="/posts" 
            style={{ 
              textDecoration: 'none', 
              color: location.pathname.startsWith('/posts') ? '#0056b3' : '#007bff',
              fontWeight: location.pathname.startsWith('/posts') ? 'bold' : 'normal'
            }}
          >
            Posts
          </Link>
        </li>
      </ul>
    </nav>
  );
}

// Main app component
function App() {
  return (
    <Router>
      <div>
        <Navigation />
        <main style={{ padding: '2rem' }}>
          <Routes>
            <Route path="/" element={<div><h1>Welcome to our app!</h1></div>} />
            <Route path="/users" element={<UserList />} />
            <Route path="/users/:userId" element={<UserDetail />} />
            <Route path="/posts" element={<PostList />} />
            <Route path="/posts/:postId" element={<PostDetail />} />
            <Route path="*" element={<div><h1>404 - Page Not Found</h1></div>} />
          </Routes>
        </main>
      </div>
    </Router>
  );
}

export default App;

How to Implement Nested Routing? Complex Route Hierarchies​

What is Nested Routing?​

Nested routing allows you to create complex route hierarchies where child routes are rendered within parent route components. This enables you to build sophisticated layouts and maintain consistent UI across related pages.

Nested routing is what enables you to create complex application layouts with shared components and consistent navigation patterns.

How to Implement Nested Routing?​

import React from 'react';
import { 
  BrowserRouter as Router, 
  Routes, 
  Route, 
  Link, 
  Outlet,
  useParams,
  useNavigate
} from 'react-router-dom';

// Layout component for nested routes
function DashboardLayout() {
  return (
    <div style={{ display: 'flex' }}>
      <aside style={{ 
        width: '200px', 
        backgroundColor: '#f8f9fa', 
        padding: '1rem',
        borderRight: '1px solid #dee2e6'
      }}>
        <h3>Dashboard</h3>
        <nav>
          <ul style={{ listStyle: 'none', padding: 0 }}>
            <li style={{ margin: '0.5rem 0' }}>
              <Link to="/dashboard" style={{ textDecoration: 'none', color: '#007bff' }}>
                Overview
              </Link>
            </li>
            <li style={{ margin: '0.5rem 0' }}>
              <Link to="/dashboard/analytics" style={{ textDecoration: 'none', color: '#007bff' }}>
                Analytics
              </Link>
            </li>
            <li style={{ margin: '0.5rem 0' }}>
              <Link to="/dashboard/users" style={{ textDecoration: 'none', color: '#007bff' }}>
                Users
              </Link>
            </li>
            <li style={{ margin: '0.5rem 0' }}>
              <Link to="/dashboard/settings" style={{ textDecoration: 'none', color: '#007bff' }}>
                Settings
              </Link>
            </li>
          </ul>
        </nav>
      </aside>
      <main style={{ flex: 1, padding: '1rem' }}>
        <Outlet />
      </main>
    </div>
  );
}

// Dashboard overview component
function DashboardOverview() {
  return (
    <div>
      <h2>Dashboard Overview</h2>
      <div style={{ 
        display: 'grid', 
        gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', 
        gap: '1rem' 
      }}>
        <div style={{ 
          backgroundColor: '#e3f2fd', 
          padding: '1rem', 
          borderRadius: '8px' 
        }}>
          <h3>Total Users</h3>
          <p style={{ fontSize: '2rem', margin: 0 }}>1,234</p>
        </div>
        <div style={{ 
          backgroundColor: '#e8f5e8', 
          padding: '1rem', 
          borderRadius: '8px' 
        }}>
          <h3>Active Sessions</h3>
          <p style={{ fontSize: '2rem', margin: 0 }}>567</p>
        </div>
        <div style={{ 
          backgroundColor: '#fff3e0', 
          padding: '1rem', 
          borderRadius: '8px' 
        }}>
          <h3>Revenue</h3>
          <p style={{ fontSize: '2rem', margin: 0 }}>$12,345</p>
        </div>
      </div>
    </div>
  );
}

// Analytics component
function Analytics() {
  return (
    <div>
      <h2>Analytics</h2>
      <p>View detailed analytics and reports here.</p>
      <div style={{ 
        backgroundColor: '#f8f9fa', 
        padding: '2rem', 
        borderRadius: '8px',
        textAlign: 'center'
      }}>
        <p>Analytics charts and graphs would go here</p>
      </div>
    </div>
  );
}

// Users management component
function UsersManagement() {
  const users = [
    { id: 1, name: 'John Doe', email: '[email protected]', status: 'active' },
    { id: 2, name: 'Jane Smith', email: '[email protected]', status: 'inactive' },
    { id: 3, name: 'Bob Johnson', email: '[email protected]', status: 'active' }
  ];

  return (
    <div>
      <h2>Users Management</h2>
      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
        <thead>
          <tr style={{ backgroundColor: '#f8f9fa' }}>
            <th style={{ padding: '0.5rem', border: '1px solid #dee2e6' }}>Name</th>
            <th style={{ padding: '0.5rem', border: '1px solid #dee2e6' }}>Email</th>
            <th style={{ padding: '0.5rem', border: '1px solid #dee2e6' }}>Status</th>
            <th style={{ padding: '0.5rem', border: '1px solid #dee2e6' }}>Actions</th>
          </tr>
        </thead>
        <tbody>
          {users.map(user => (
            <tr key={user.id}>
              <td style={{ padding: '0.5rem', border: '1px solid #dee2e6' }}>{user.name}</td>
              <td style={{ padding: '0.5rem', border: '1px solid #dee2e6' }}>{user.email}</td>
              <td style={{ padding: '0.5rem', border: '1px solid #dee2e6' }}>
                <span style={{ 
                  backgroundColor: user.status === 'active' ? '#d4edda' : '#f8d7da',
                  color: user.status === 'active' ? '#155724' : '#721c24',
                  padding: '0.25rem 0.5rem',
                  borderRadius: '4px',
                  fontSize: '0.875rem'
                }}>
                  {user.status}
                </span>
              </td>
              <td style={{ padding: '0.5rem', border: '1px solid #dee2e6' }}>
                <Link to={`/dashboard/users/${user.id}`} style={{ 
                  textDecoration: 'none', 
                  color: '#007bff',
                  marginRight: '0.5rem'
                }}>
                  View
                </Link>
                <button style={{ 
                  backgroundColor: '#dc3545', 
                  color: 'white', 
                  border: 'none', 
                  padding: '0.25rem 0.5rem',
                  borderRadius: '4px',
                  cursor: 'pointer'
                }}>
                  Delete
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

// User detail component
function UserDetail() {
  const { userId } = useParams();
  const navigate = useNavigate();
  
  const user = {
    id: userId,
    name: 'John Doe',
    email: '[email protected]',
    role: 'admin',
    createdAt: '2023-01-15',
    lastLogin: '2023-12-01'
  };

  return (
    <div>
      <button onClick={() => navigate('/dashboard/users')} style={{
        backgroundColor: '#6c757d',
        color: 'white',
        border: 'none',
        padding: '0.5rem 1rem',
        borderRadius: '4px',
        cursor: 'pointer',
        marginBottom: '1rem'
      }}>
        ← Back to Users
      </button>
      <h2>User Details</h2>
      <div style={{ 
        backgroundColor: '#f8f9fa', 
        padding: '1rem', 
        borderRadius: '8px' 
      }}>
        <p><strong>ID:</strong> {user.id}</p>
        <p><strong>Name:</strong> {user.name}</p>
        <p><strong>Email:</strong> {user.email}</p>
        <p><strong>Role:</strong> {user.role}</p>
        <p><strong>Created:</strong> {user.createdAt}</p>
        <p><strong>Last Login:</strong> {user.lastLogin}</p>
      </div>
    </div>
  );
}

// Settings component
function Settings() {
  return (
    <div>
      <h2>Settings</h2>
      <div style={{ 
        backgroundColor: '#f8f9fa', 
        padding: '1rem', 
        borderRadius: '8px' 
      }}>
        <h3>Application Settings</h3>
        <form>
          <div style={{ marginBottom: '1rem' }}>
            <label style={{ display: 'block', marginBottom: '0.5rem' }}>
              Application Name:
            </label>
            <input 
              type="text" 
              defaultValue="My App" 
              style={{ 
                width: '100%', 
                padding: '0.5rem', 
                border: '1px solid #ced4da',
                borderRadius: '4px'
              }}
            />
          </div>
          <div style={{ marginBottom: '1rem' }}>
            <label style={{ display: 'block', marginBottom: '0.5rem' }}>
              Theme:
            </label>
            <select style={{ 
              width: '100%', 
              padding: '0.5rem', 
              border: '1px solid #ced4da',
              borderRadius: '4px'
            }}>
              <option value="light">Light</option>
              <option value="dark">Dark</option>
            </select>
          </div>
          <button type="submit" style={{
            backgroundColor: '#007bff',
            color: 'white',
            border: 'none',
            padding: '0.5rem 1rem',
            borderRadius: '4px',
            cursor: 'pointer'
          }}>
            Save Settings
          </button>
        </form>
      </div>
    </div>
  );
}

// Main app component
function App() {
  return (
    <Router>
      <div>
        <header style={{ 
          backgroundColor: '#007bff', 
          color: 'white', 
          padding: '1rem',
          textAlign: 'center'
        }}>
          <h1>My Application</h1>
        </header>
        <Routes>
          <Route path="/" element={<div style={{ padding: '2rem' }}><h2>Welcome to our app!</h2></div>} />
          <Route path="/dashboard" element={<DashboardLayout />}>
            <Route index element={<DashboardOverview />} />
            <Route path="analytics" element={<Analytics />} />
            <Route path="users" element={<UsersManagement />} />
            <Route path="users/:userId" element={<UserDetail />} />
            <Route path="settings" element={<Settings />} />
          </Route>
        </Routes>
      </div>
    </Router>
  );
}

export default App;

How to Implement Protected Routes? Authentication and Authorization​

What are Protected Routes?​

Protected routes are routes that require authentication or authorization before users can access them. They're essential for securing sensitive parts of your application and providing different experiences for authenticated and unauthenticated users.

Protected routes are what ensure that only authorized users can access sensitive parts of your application, maintaining security and providing personalized experiences.

How to Implement Route Protection?​

import React, { createContext, useContext, useState } from 'react';
import { 
  BrowserRouter as Router, 
  Routes, 
  Route, 
  Navigate,
  useLocation
} from 'react-router-dom';

// Authentication context
const AuthContext = createContext();

// Authentication provider
function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  // Simulate authentication check
  React.useEffect(() => {
    const checkAuth = async () => {
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 1000));
      
      // Check for stored auth token
      const token = localStorage.getItem('authToken');
      if (token) {
        setUser({ id: 1, name: 'John Doe', role: 'admin' });
      }
      setLoading(false);
    };

    checkAuth();
  }, []);

  const login = async (credentials) => {
    setLoading(true);
    try {
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 1000));
      
      if (credentials.username === 'admin' && credentials.password === 'password') {
        const user = { id: 1, name: 'John Doe', role: 'admin' };
        setUser(user);
        localStorage.setItem('authToken', 'fake-jwt-token');
        return { success: true };
      } else {
        return { success: false, error: 'Invalid credentials' };
      }
    } catch (error) {
      return { success: false, error: 'Login failed' };
    } finally {
      setLoading(false);
    }
  };

  const logout = () => {
    setUser(null);
    localStorage.removeItem('authToken');
  };

  const value = {
    user,
    loading,
    login,
    logout
  };

  return (
    <AuthContext.Provider value={value}>
      {children}
    </AuthContext.Provider>
  );
}

// Custom hook for authentication
function useAuth() {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within AuthProvider');
  }
  return context;
}

// Protected route component
function ProtectedRoute({ children, requiredRole }) {
  const { user, loading } = useAuth();
  const location = useLocation();

  if (loading) {
    return (
      <div style={{ 
        display: 'flex', 
        justifyContent: 'center', 
        alignItems: 'center', 
        height: '100vh' 
      }}>
        <div>Loading...</div>
      </div>
    );
  }

  if (!user) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

  if (requiredRole && user.role !== requiredRole) {
    return <Navigate to="/unauthorized" replace />;
  }

  return children;
}

// Login component
function Login() {
  const { login, loading } = useAuth();
  const navigate = useNavigate();
  const location = useLocation();
  const [credentials, setCredentials] = useState({ username: '', password: '' });
  const [error, setError] = useState('');

  const from = location.state?.from?.pathname || '/dashboard';

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');
    
    const result = await login(credentials);
    if (result.success) {
      navigate(from, { replace: true });
    } else {
      setError(result.error);
    }
  };

  return (
    <div style={{ 
      display: 'flex', 
      justifyContent: 'center', 
      alignItems: 'center', 
      height: '100vh',
      backgroundColor: '#f8f9fa'
    }}>
      <div style={{ 
        backgroundColor: 'white', 
        padding: '2rem', 
        borderRadius: '8px',
        boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
        width: '300px'
      }}>
        <h2>Login</h2>
        <form onSubmit={handleSubmit}>
          <div style={{ marginBottom: '1rem' }}>
            <label style={{ display: 'block', marginBottom: '0.5rem' }}>
              Username:
            </label>
            <input
              type="text"
              value={credentials.username}
              onChange={(e) => setCredentials({ ...credentials, username: e.target.value })}
              style={{ 
                width: '100%', 
                padding: '0.5rem', 
                border: '1px solid #ced4da',
                borderRadius: '4px'
              }}
              required
            />
          </div>
          <div style={{ marginBottom: '1rem' }}>
            <label style={{ display: 'block', marginBottom: '0.5rem' }}>
              Password:
            </label>
            <input
              type="password"
              value={credentials.password}
              onChange={(e) => setCredentials({ ...credentials, password: e.target.value })}
              style={{ 
                width: '100%', 
                padding: '0.5rem', 
                border: '1px solid #ced4da',
                borderRadius: '4px'
              }}
              required
            />
          </div>
          {error && (
            <div style={{ 
              color: '#dc3545', 
              marginBottom: '1rem',
              fontSize: '0.875rem'
            }}>
              {error}
            </div>
          )}
          <button
            type="submit"
            disabled={loading}
            style={{
              width: '100%',
              backgroundColor: '#007bff',
              color: 'white',
              border: 'none',
              padding: '0.75rem',
              borderRadius: '4px',
              cursor: loading ? 'not-allowed' : 'pointer',
              opacity: loading ? 0.6 : 1
            }}
          >
            {loading ? 'Logging in...' : 'Login'}
          </button>
        </form>
        <p style={{ fontSize: '0.875rem', color: '#6c757d', marginTop: '1rem' }}>
          Demo credentials: admin / password
        </p>
      </div>
    </div>
  );
}

// Dashboard component
function Dashboard() {
  const { user, logout } = useAuth();

  return (
    <div style={{ padding: '2rem' }}>
      <div style={{ 
        display: 'flex', 
        justifyContent: 'space-between', 
        alignItems: 'center',
        marginBottom: '2rem'
      }}>
        <h1>Dashboard</h1>
        <div>
          <span>Welcome, {user.name}!</span>
          <button 
            onClick={logout}
            style={{
              marginLeft: '1rem',
              backgroundColor: '#dc3545',
              color: 'white',
              border: 'none',
              padding: '0.5rem 1rem',
              borderRadius: '4px',
              cursor: 'pointer'
            }}
          >
            Logout
          </button>
        </div>
      </div>
      <div style={{ 
        backgroundColor: '#f8f9fa', 
        padding: '1rem', 
        borderRadius: '8px' 
      }}>
        <h2>Protected Content</h2>
        <p>This content is only accessible to authenticated users.</p>
        <p>Your role: <strong>{user.role}</strong></p>
      </div>
    </div>
  );
}

// Admin panel component
function AdminPanel() {
  const { user } = useAuth();

  return (
    <div style={{ padding: '2rem' }}>
      <h1>Admin Panel</h1>
      <div style={{ 
        backgroundColor: '#f8f9fa', 
        padding: '1rem', 
        borderRadius: '8px' 
      }}>
        <h2>Admin Only Content</h2>
        <p>This content is only accessible to admin users.</p>
        <p>Current user: <strong>{user.name}</strong></p>
      </div>
    </div>
  );
}

// Unauthorized component
function Unauthorized() {
  return (
    <div style={{ 
      display: 'flex', 
      justifyContent: 'center', 
      alignItems: 'center', 
      height: '100vh',
      flexDirection: 'column'
    }}>
      <h1>403 - Unauthorized</h1>
      <p>You don't have permission to access this page.</p>
      <button 
        onClick={() => window.history.back()}
        style={{
          backgroundColor: '#007bff',
          color: 'white',
          border: 'none',
          padding: '0.5rem 1rem',
          borderRadius: '4px',
          cursor: 'pointer'
        }}
      >
        Go Back
      </button>
    </div>
  );
}

// Main app component
function App() {
  return (
    <AuthProvider>
      <Router>
        <Routes>
          <Route path="/login" element={<Login />} />
          <Route 
            path="/dashboard" 
            element={
              <ProtectedRoute>
                <Dashboard />
              </ProtectedRoute>
            } 
          />
          <Route 
            path="/admin" 
            element={
              <ProtectedRoute requiredRole="admin">
                <AdminPanel />
              </ProtectedRoute>
            } 
          />
          <Route path="/unauthorized" element={<Unauthorized />} />
          <Route path="/" element={<Navigate to="/dashboard" replace />} />
        </Routes>
      </Router>
    </AuthProvider>
  );
}

export default App;

Why is React Router Important? The Benefits Explained​

Why Use Client-Side Routing?​

Client-side routing provides several key benefits:

  1. Better User Experience: No page reloads, faster navigation
  2. State Preservation: Application state is maintained during navigation
  3. SEO Optimization: Enables server-side rendering and SEO-friendly URLs
  4. Bookmarkable URLs: Users can bookmark and share specific pages
  5. Browser History: Back/forward buttons work as expected
  6. Code Organization: Clear separation of different views and features

Why Use Nested Routing?​

Nested routing provides:

  1. Layout Consistency: Shared layouts across related pages
  2. Code Reusability: Common components can be shared
  3. Better Organization: Logical grouping of related routes
  4. Performance: Only necessary components are rendered
  5. Maintainability: Easier to manage complex route structures

Why Implement Route Protection?​

Route protection is essential because:

  1. Security: Prevents unauthorized access to sensitive content
  2. User Experience: Provides appropriate content for different user types
  3. Data Protection: Ensures sensitive data is only accessible to authorized users
  4. Compliance: Meets security requirements for enterprise applications
  5. Personalization: Enables personalized experiences based on user roles

React Router Best Practices​

What are the Key Best Practices?​

  1. Use BrowserRouter for Production: Provides proper browser history support
  2. Implement Error Boundaries: Handle routing errors gracefully
  3. Use Lazy Loading: Implement code splitting for better performance
  4. Protect Sensitive Routes: Implement authentication and authorization
  5. Handle 404 Pages: Provide meaningful error pages for unknown routes
  6. Use TypeScript: Get type safety for route parameters and navigation

How to Avoid Common Routing Pitfalls?​

// ❌ Don't forget to handle loading states
function BadLazyRoute() {
  const LazyComponent = lazy(() => import('./Component'));
  
  return (
    <Routes>
      <Route path="/lazy" element={<LazyComponent />} /> {/* No Suspense */}
    </Routes>
  );
}

// ✅ Good - always wrap lazy routes with Suspense
function GoodLazyRoute() {
  const LazyComponent = lazy(() => import('./Component'));
  
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/lazy" element={<LazyComponent />} />
      </Routes>
    </Suspense>
  );
}

// ❌ Don't forget to handle route parameters
function BadRouteParams() {
  const { id } = useParams();
  
  return <div>ID: {id}</div>; // No validation
}

// ✅ Good - validate route parameters
function GoodRouteParams() {
  const { id } = useParams();
  
  if (!id || isNaN(id)) {
    return <div>Invalid ID</div>;
  }
  
  return <div>ID: {id}</div>;
}

Summary: Mastering React Router and Navigation​

What Have We Learned?​

In this chapter, we've explored comprehensive React Router implementation:

  1. Basic Routing: How to set up and configure React Router
  2. Dynamic Routing: How to handle URL parameters and query strings
  3. Nested Routing: How to create complex route hierarchies
  4. Protected Routes: How to implement authentication and authorization
  5. Navigation Patterns: How to create intuitive navigation experiences
  6. Best Practices: How to avoid common pitfalls and optimize performance

How to Choose the Right Routing Strategy?​

  1. Simple Applications: Use basic routing with Routes and Route components
  2. Complex Applications: Implement nested routing for better organization
  3. Secure Applications: Always implement route protection
  4. Performance-Critical Apps: Use lazy loading and code splitting
  5. SEO-Important Apps: Consider server-side rendering with React Router

Why This Matters for Your React Applications?​

Understanding React Router is crucial because:

  • User Experience: Proper routing provides smooth, intuitive navigation
  • Application Architecture: Routing defines the structure of your application
  • Security: Route protection ensures sensitive content is secure
  • Performance: Optimized routing improves application performance
  • Maintainability: Well-structured routing makes applications easier to maintain

Next Steps​

Now that you understand React Router, you're ready to explore:

  • Advanced Patterns: How to implement sophisticated routing patterns
  • Testing: How to test routing logic and navigation
  • Performance: How to optimize routing for better performance
  • Integration: How to integrate routing with state management and APIs

Remember: The best routing strategy is the one that provides the best user experience while maintaining code simplicity and performance.