React Router v6: The Mental Model and Practical Patterns

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

function Nav() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <NavLink
        to="/about"
        className={({ isActive }) => isActive ? 'nav-active' : ''}
      >
        About
      </NavLink>
    </nav>
  );
}

For programmatic navigation (after a form submit, after login, etc.):

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

function LoginForm() {
  const navigate = useNavigate();

async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    await login(credentials);
    navigate('/dashboard');
    // or navigate(-1) to go back
    // or navigate('/dashboard', { replace: true }) to replace history entry
  }

return <form onSubmit={handleSubmit}>...</form>;
}

Route Parameters

Dynamic segments in the path become params:

// Route: <Route path="/users/:id" element={<UserProfile />} />

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

function UserProfile() {
  const { id } = useParams<{ id: string }>();
  // id is always a string -- parse it if you need a number
  // fetch user with this id...

return <div>User {id}</div>;
}

Params are always strings. If your ID is a number, you'll need parseInt or Number(). This trips people up when comparing with === against numeric IDs from an API.

Query Parameters

For search filters, pagination, and other URL state that isn't part of the path:

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

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

function nextPage() {
    setSearchParams(prev => {
      prev.set('page', String(page + 1));
      return prev;
    });
  }

// URL looks like: /products?page=2&category=electronics
  return (
    <div>
      <p>Page {page}, Category: {category}</p>
      <button onClick={nextPage}>Next Page</button>
    </div>
  );
}

This is URL as state in action. The page number lives in the URL, so users can bookmark it, share it, or hit the back button and it just works. Way better than hiding pagination in component state.

Nested Routes and Layout Routes

This is where v6 really shines. You can nest routes to share layout:

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="dashboard" element={<Dashboard />}>
            <Route index element={<DashboardHome />} />
            <Route path="settings" element={<Settings />} />
            <Route path="analytics" element={<Analytics />} />
          </Route>
        </Route>
        <Route path="/login" element={<Login />} />
      </Routes>
    </BrowserRouter>
  );
}

The Layout component renders the shared chrome (header, sidebar, footer) and an Outlet where child routes render:

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

function Layout() {
  return (
    <div>
      <Header />
      <main>
        <Outlet />
      </main>
      <Footer />
    </div>
  );
}

Protected Routes

The pattern for auth-gated routes:

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

function ProtectedRoute({ children }: { children: React.ReactNode }) {
  const { user } = useAuth(); // your auth hook
  const location = useLocation();

if (!user) {
    // Redirect to login, but remember where they were going
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

return <>{children}</>;
}

Use it as a wrapper:

<Route
  path="dashboard"
  element={
    <ProtectedRoute>
      <Dashboard />
    </ProtectedRoute>
  }
>
  <Route index element={<DashboardHome />} />
  <Route path="settings" element={<Settings />} />
</Route>

Or as a layout route (cleaner for many protected pages):

function ProtectedLayout() {
  const { user } = useAuth();
  const location = useLocation();

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

// In your routes:
<Route element={<ProtectedLayout />}>
  <Route path="dashboard" element={<Dashboard />} />
  <Route path="profile" element={<Profile />} />
  <Route path="settings" element={<Settings />} />
</Route>

After login, you can redirect back:

function Login() {
  const location = useLocation();
  const navigate = useNavigate();
  const from = (location.state as any)?.from?.pathname || '/dashboard';

async function handleLogin() {
    await login(credentials);
    navigate(from, { replace: true });
  }
  // ...
}

Lazy Loading Routes

For larger apps, you don't want to load every page's JavaScript upfront:

import { lazy, Suspense } from 'react';

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

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/settings" element={<Settings />} />
          <Route path="/analytics" element={<Analytics />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

Common Mistakes