React Router & Navigation

Route Configuration and Nested Routes

Basic Setup

React Router v6 uses a declarative route configuration with BrowserRouter, Routes, and Route components. The Routes component matches the first Route whose path matches the current URL and renders its element. Nested routes use the Outlet component as a placeholder for child routes, enabling shared layouts.

import { BrowserRouter, Routes, Route, Link, Outlet } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="products" element={<ProductsLayout />}>
            <Route index element={<ProductList />} />
            <Route path=":productId" element={<ProductDetail />} />
          </Route>
          <Route path="*" element={<NotFound />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

function Layout() {
  return (
    <div>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/products">Products</Link>
      </nav>
      <main>
        <Outlet />  {/* Child routes render here */}
      </main>
      <footer>© 2026 My App</footer>
    </div>
  );
}

Route Groups and Shared Layouts

Route groups let you organize routes without affecting the URL path. Wrap related routes in a group with a shared layout by creating a parent route without a path segment.

<Routes>
  <Route element={<AdminLayout />}>
    <Route path="/admin/dashboard" element={<AdminDashboard />} />
    <Route path="/admin/users" element={<UserManagement />} />
    <Route path="/admin/settings" element={<AdminSettings />} />
  </Route>
  <Route element={<PublicLayout />}>
    <Route path="/login" element={<Login />} />
    <Route path="/register" element={<Register />} />
  </Route>
</Routes>

Index Routes and Splats

The index prop on a Route makes it the default child route rendered when the parent path matches exactly. The * catch-all path handles 404 pages for unmatched routes. Splats also enable deep linking into nested content.

<Route path="/dashboard" element={<DashboardLayout />}>
  <Route index element={<DashboardHome />} />
  <Route path="analytics" element={<Analytics />} />
  <Route path="settings" element={<Settings />} />
  <Route path="*" element={<DashboardNotFound />} />
</Route>

The key concept is that nested Route elements define a tree of URL segments. React Router flattens this tree and matches the most specific path. The Outlet component in a parent element renders the matched child, enabling clean composition of layouts without prop drilling or wrapper components.

Dynamic Parameters and Search Params

Reading Route Parameters

Dynamic segments in a route path are prefixed with : and captured by the useParams hook. Parameters are always strings, so you must parse numeric or boolean values explicitly. Nested dynamic segments enable complex URL patterns like /users/:userId/posts/:postId.

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

function PostDetail() {
  const { userId, postId } = useParams();
  const [post, setPost] = useState(null);

  useEffect(() => {
    fetch(`/api/users/${userId}/posts/${postId}`)
      .then(res => res.json())
      .then(setPost);
  }, [userId, postId]);

  if (!post) return <Spinner />;
  return (
    <article>
      <h1>{post.title}</h1>
      <p>By user {userId}</p>
      <p>{post.body}</p>
    </article>
  );
}

Managing Search Params

useSearchParams provides a URL-safe way to manage query parameters like filters, pagination, and sorting. It returns a URLSearchParams object and a setter function. Updating search params updates the URL without re-mounting the component.

function ProductList() {
  const [searchParams, setSearchParams] = useSearchParams();
  const category = searchParams.get('category') || 'all';
  const page = parseInt(searchParams.get('page') || '1', 10);
  const sort = searchParams.get('sort') || 'name';

  const updateFilter = (key, value) => {
    setSearchParams(prev => {
      if (value) prev.set(key, value);
      else prev.delete(key);
      return prev;
    });
  };

  return (
    <div>
      <select value={category} onChange={(e) => updateFilter('category', e.target.value)}>
        <option value="all">All Categories</option>
        <option value="electronics">Electronics</option>
        <option value="books">Books</option>
      </select>
      <select value={sort} onChange={(e) => updateFilter('sort', e.target.value)}>
        <option value="name">Name</option>
        <option value="price">Price</option>
        <option value="rating">Rating</option>
      </select>
      <p>Page {page} — Category: {category}</p>
      <button onClick={() => updateFilter('page', String(page + 1))}>Next</button>
    </div>
  );
}

Programmatic Navigation

The useNavigate hook enables programmatic navigation from event handlers, effects, or after async operations. Pass a path string or a delta number for relative movement. The second argument supports state that persists across navigation but is not visible in the URL.

function SearchResults({ results }) {
  const navigate = useNavigate();

  const handleSelect = (item) => {
    navigate(`/products/${item.id}`, {
      state: { fromSearch: true, query: currentQuery },
    });
  };

  const goBack = () => navigate(-1);
  const goForward = () => navigate(1);

  return (
    <ul>
      {results.map(item => (
        <li key={item.id} onClick={() => handleSelect(item)}>
          {item.name}
        </li>
      ))}
    </ul>
  );
}

function ProductDetail() {
  const location = useLocation();
  const fromSearch = location.state?.fromSearch;
  return <div>{fromSearch ? 'Came from search' : 'Direct visit'}</div>;
}

Protected Routes and Auth Guards

Route Guard Component

A route guard wraps protected content and checks authentication before rendering. If the user is not authenticated, redirect to the login page while preserving the intended destination using location.state.from. The replace prop prevents the login redirect from appearing in browser history.

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

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

  if (loading) return <Spinner />;

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

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

  return children;
}

<Routes>
  <Route path="/login" element={<LoginPage />} />
  <Route path="/unauthorized" element={<UnauthorizedPage />} />
  <Route path="/dashboard" element={
    <ProtectedRoute>
      <Dashboard />
    </ProtectedRoute>
  } />
  <Route path="/admin" element={
    <ProtectedRoute requiredRole="admin">
      <AdminPanel />
    </ProtectedRoute>
  } />
  <Route path="/editor" element={
    <ProtectedRoute requiredRole="editor">
      <EditorPanel />
    </ProtectedRoute>
  } />
</Routes>

Login with Redirect After Authentication

After successful login, navigate to the page the user originally intended to visit. Read the from location from location.state and fall back to a default route if no state is present. Use replace: true to avoid creating a back-button loop to the login page.

function LoginPage() {
  const { login } = useAuth();
  const navigate = useNavigate();
  const location = useLocation();
  const from = location.state?.from?.pathname || '/dashboard';
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await login(email, password);
      navigate(from, { replace: true });
    } catch (err) {
      setError('Invalid credentials');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <p>You were redirected from {from}</p>
      <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 />
      {error && <p className="error">{error}</p>}
      <button type="submit">Log In</button>
    </form>
  );
}

Role-Based Conditional Navigation

Render navigation links conditionally based on user roles to prevent unauthorized users from seeing links they cannot access. This is a UX improvement and does not replace server-side authorization checks.

function Sidebar() {
  const { user } = useAuth();
  return (
    <nav>
      <Link to="/dashboard">Dashboard</Link>
      {user.role === 'admin' && (
        <Link to="/admin">Admin Panel</Link>
      )}
      {user.role === 'editor' && (
        <Link to="/posts/new">New Post</Link>
      )}
      {user.role === 'admin' && (
        <Link to="/admin/users">User Management</Link>
      )}
      <Link to="/profile">Profile</Link>
    </nav>
  );
}

Navigation Patterns and Transitions

NavLink for Active Styling

NavLink is a specialized Link that adds an isActive class (or applies a function) when the link matches the current URL. This is essential for building navigation menus that visually indicate the current page without manual state management.

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

function Navbar() {
  return (
    <nav>
      <NavLink 
        to="/" 
        end
        className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}
      >
        Home
      </NavLink>
      <NavLink 
        to="/about" 
        className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
      >
        About
      </NavLink>
      <NavLink 
        to="/products"
        style={({ isActive }) => ({ color: isActive ? 'blue' : 'gray' })}
      >
        Products
      </NavLink>
    </nav>
  );
}

The end prop on NavLink prevents it from matching all routes that start with the given path. Without end, a link to / would be active on every page.

Page Transition Animations

Animate route transitions by wrapping the outlet in a component that uses the current pathname as a key. This triggers a CSS animation on every navigation.

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

function AnimatedLayout() {
  const location = useLocation();
  return (
    <div className="layout">
      <nav>...</nav>
      <div key={location.pathname} className="page-transition">
        <Outlet />
      </div>
    </div>
  );
}

.page-transition {
  animation: fadeSlideIn 0.3s ease-out;
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

Breadcrumbs from Route Metadata

Build breadcrumbs dynamically by traversing the route tree or using a mapping object. This approach scales to deeply nested routes and keeps breadcrumb labels in sync with route configuration.

const routeLabels = {
  '/': 'Home',
  '/products': 'Products',
  '/products/:productId': 'Product Detail',
  '/about': 'About',
};

function Breadcrumbs() {
  const location = useLocation();
  const segments = location.pathname.split('/').filter(Boolean);

  const crumbs = segments.map((segment, index) => {
    const path = '/' + segments.slice(0, index + 1).join('/');
    const label = routeLabels[path] || segment;
    return { path, label };
  });

  return (
    <nav aria-label="Breadcrumb">
      <Link to="/">Home</Link>
      {crumbs.map(crumb => (
        <span key={crumb.path}>
          {' / '}<Link to={crumb.path}>{crumb.label}</Link>
        </span>
      ))}
    </nav>
  );
}

Code Splitting and Lazy Loading

React.lazy for Route-Based Splitting

React.lazy dynamically imports a component, splitting it into a separate chunk that loads only when the route is visited. Wrap lazy routes in Suspense with a fallback component. This reduces the initial bundle size significantly for large applications.

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

const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));
const AdminPanel = lazy(() => import('./pages/AdminPanel'));
const Analytics = lazy(() => import('./pages/Analytics'));

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<PageSkeleton />}>
        <Routes>
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/settings" element={<Settings />} />
          <Route path="/analytics" element={<Analytics />} />
          <Route path="/admin" element={
            <ProtectedRoute requiredRole="admin">
              <AdminPanel />
            </ProtectedRoute>
          } />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

Preloading on Hover

Preload lazy-loaded modules when the user hovers over a link, so the chunk is ready before navigation occurs. This eliminates the perceived loading delay on click. The browser caches the module, so the actual navigation is instant.

function preloadRoute(importFn) {
  return () => { importFn(); };
}

const preloadDashboard = preloadRoute(() => import('./pages/Dashboard'));
const preloadSettings = preloadRoute(() => import('./pages/Settings'));

function Sidebar() {
  return (
    <nav>
      <Link 
        to="/dashboard"
        onMouseEnter={preloadDashboard}
      >
        Dashboard
      </Link>
      <Link 
        to="/settings"
        onMouseEnter={preloadSettings}
      >
        Settings
      </Link>
    </nav>
  );
}

Loading States and Error Boundaries

Provide meaningful loading feedback with skeleton components. Wrap lazy-loaded routes in an error boundary to catch and recover from chunk loading failures, which can happen due to network issues or new deployments.

function PageSkeleton() {
  return (
    <div className="skeleton">
      <div className="skeleton-header" />
      <div className="skeleton-content" />
      <div className="skeleton-content short" />
    </div>
  );
}

class RouteErrorBoundary extends React.Component {
  state = { error: null };

  static getDerivedStateFromError(error) {
    return { error };
  }

  render() {
    if (this.state.error) {
      return (
        <div className="error-page">
          <h2>Failed to load page</h2>
          <p>{this.state.error.message}</p>
          <button onClick={() => this.setState({ error: null })}>Retry</button>
        </div>
      );
    }
    return this.props.children;
  }
}

<BrowserRouter>
  <RouteErrorBoundary>
    <Suspense fallback={<PageSkeleton />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Suspense>
  </RouteErrorBoundary>
</BrowserRouter>

A well-structured lazy loading strategy loads only the code needed for the current view, deferring non-critical routes until the user navigates to them. This dramatically improves Time to Interactive for the initial page load.