React Router

🔍 What Is It?

React Router is a client-side routing library. It intercepts browser navigation, matches the current URL to a route definition, and renders the corresponding component.

Core components (v6):

• →<BrowserRouter> — wraps the app, uses the browser History API
• →<Routes> — container for route definitions (replaces Switch from v5)
• →<Route path="/" element={<Home />} /> — maps a path to a component
• →<Link to="/about"> — navigation without page reload
• →<Outlet /> — renders the matched child route (for nested routes)

Hooks:

• →useNavigate() — programmatic navigation
• →useParams() — reads URL parameters (/users/:id)
• →useSearchParams() — reads and sets query string parameters
• →useLocation() — reads the current location object

🎯 Why Do We Need It?

Without a router, a React app is a single view. Users cannot bookmark specific pages, share URLs, or use browser back/forward. React Router provides:

• →Bookmarkable URLs — /claims/123 always shows claim 123
• →Browser history — back button works as expected
• →Code splitting — lazy load routes to reduce initial bundle size
• →Nested layouts — a dashboard layout shared across all dashboard pages
• →Protected routes — redirect unauthenticated users to login

🏗️ What Happens in Real Projects?

In a healthcare portal:

/                    → LandingPage
/login               → LoginPage
/dashboard           → DashboardLayout
  /dashboard/claims  → ClaimsListPage
  /dashboard/claims/:id → ClaimDetailPage
  /dashboard/profile → ProfilePage
/admin               → AdminLayout (admin role only)
  /admin/users       → UserManagementPage

⚙️ How It Works

React Router uses the browser's History API (pushState, popState) to update the URL without reloading the page. When the URL changes:

1. React Router's <Routes> component re-evaluates all <Route> definitions
2. It finds the best matching route (most specific wins)
3. It renders the matched component
4. Nested routes render via <Outlet /> in the parent layout

Route matching (v6):

Routes are matched by specificity, not order. /users/new matches before /users/:id because it is more specific.

💻 Example

React Router in a Real Application — Full route setup with nested routes, lazy loading, and programmatic navigation.

import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { lazy, Suspense } from 'react';

// Lazy load routes — each route is a separate chunk
const DashboardLayout = lazy(() => import('./layouts/DashboardLayout'));
const ClaimsPage      = lazy(() => import('./pages/ClaimsPage'));
const ClaimDetail     = lazy(() => import('./pages/ClaimDetailPage'));
const ProfilePage     = lazy(() => import('./pages/ProfilePage'));
const LoginPage       = lazy(() => import('./pages/LoginPage'));
const NotFoundPage    = lazy(() => import('./pages/NotFoundPage'));

export function AppRouter() {
  return (
    <BrowserRouter>
      <Suspense fallback={<PageSpinner />}>
        <Routes>
          <Route path="/login" element={<LoginPage />} />

          {/* Protected layout — wraps all dashboard routes */}
          <Route element={<RequireAuth />}>
            <Route path="/dashboard" element={<DashboardLayout />}>
              <Route index element={<Navigate to="claims" replace />} />
              <Route path="claims" element={<ClaimsPage />} />
              <Route path="claims/:claimId" element={<ClaimDetail />} />
              <Route path="profile" element={<ProfilePage />} />
            </Route>
          </Route>

          <Route path="/" element={<Navigate to="/dashboard" replace />} />
          <Route path="*" element={<NotFoundPage />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

🤔 Common Confusions

🚨 Common Production Issues

✅ Best Practices

🏛️ Architect's Note

💬 Frequently Asked Questions

🎯 Key Takeaways

🔗 Related Topics

🎯 Practice this topic in interviews

↗ Where this topic fits