React Router

1. What is React Router?

React is a UI library. It knows how to render components, manage state, and handle events, but it has no built-in mechanism to map a URL like /about to a specific component. React Router fills that gap.

Maintained by Remix (now part of Shopify), React Router is the most widely used routing solution in the React ecosystem with hundreds of millions of downloads per month.

2. Why Do We Need a Router?

Without a router, React renders a single page at a fixed URL. Problems arise immediately:

• Refreshing the page always shows the same view
• The browser Back/Forward buttons do nothing meaningful
• You can’t share a link to a specific section like /dashboard/settings
• Bookmarks always go back to the root

React Router solves all of this by wiring React’s component tree to the browser’s URL, history stack, and navigation APIs.

3. Installation & Setup

npm install react-router-dom

Then wrap your entire app in a router provider. The most common choice for web apps is BrowserRouter:

import { createRoot } from 'react-dom/client';import { BrowserRouter } from 'react-router-dom';
import App from './App';
createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

import { Routes, Route, Link } from 'react-router-dom';import Home from './pages/Home';
import About from './pages/About';
import Profile from './pages/Profile';export default function App() {
return (
    <>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
<Link to="/profile/42">Profile</Link>      </nav>
      <Routes>
        <Route path="/"         element={<Home />} />
        <Route path="/about"     element={<About />} />
        <Route path="/profile/:id" element={<Profile />} />
      </Routes>
    </>
  );
}

Routes & Route

<Routes>
  {/* Exact match */}
  <Route path="/"             element={<Home />} />

  {/* URL parameter: :id is dynamic */}
  <Route path="/users/:id"    element={<User />} />

  {/* Wildcard: matches any remaining segments */}
  <Route path="/docs/*"       element={<Docs />} />

  {/* Catch-all 404 page */}
  <Route path="*"             element={<NotFound />} />
</Routes>

Nested Routes

Nested routes let child components render inside parent layouts without re-mounting the entire tree. The parent renders <Outlet /> as the placeholder for the child.

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

// DashboardLayout.jsx
import { Outlet, NavLink } from 'react-router-dom';

export default function DashboardLayout() {
  return (
    <div className="layout">
      <aside>
        <NavLink to="">Home</NavLink>
        <NavLink to="analytics">Analytics</NavLink>
        <NavLink to="settings">Settings</NavLink>
      </aside>
      <main>
        <Outlet /> {/* child route renders here */}
      </main>
    </div>
  );
}

Link vs NavLink

<Link> is the basic navigation element — renders an <a> tag that intercepts the click and calls the history API instead of reloading the page. <NavLink> extends it with an automatic active class when the URL matches the to prop — perfect for navigation menus.

<NavLink
  to="/about"
  className={({ isActive, isPending }) =>
    isActive ? 'nav-link active' : 'nav-link'
  }
  style={({ isActive }) => ({
    color: isActive ? '#7f8ef7' : 'inherit'
  })}
>
  About
</NavLink>

Navigate & Redirect

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

function ProtectedPage({ isLoggedIn }) {
  if (!isLoggedIn) {
    // Redirect to /login, replacing history entry
    return <Navigate to="/login" replace />;
  }
  return <div>Secret content</div>;
}

Search Params (Query Strings)

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

function SearchPage() {
  const [searchParams, setSearchParams] = useSearchParams();
  const query = searchParams.get('q') ?? '';

  return (
    <input
      value={query}
      onChange={e => setSearchParams({ q: e.target.value })}
      placeholder="Search..."
    />
  );
  // URL becomes: /search?q=react-router
}

6. Built-in Hooks

React Router provides a set of hooks to access routing state and history from any component in the tree, without prop drilling.

useNavigate — examples

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

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

  async function handleSubmit(e) {
    e.preventDefault();
    await login();

    navigate('/dashboard');          // go to /dashboard
    navigate(-1);                     // go back (like browser back)
    navigate('/login', { replace: true }); // replace history entry
    navigate('/checkout', {            // pass state
      state: { from: '/cart' }
    });
  }

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

useParams: example

import { useParams } from 'react-router-dom';
function ProductDetail() {
const { category, id } = useParams();
// URL: /products/electronics/42
// category = "electronics", id = "42"return <p>{category} — #{id}</p>;
}

useLocation: example

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

function Analytics() {
  const location = useLocation();
  // {
  //   pathname: '/about',
  //   search:   '?ref=newsletter',
  //   hash:     '#team',
  //   state:    { from: '/home' },
  //   key:      'abc123'
  // }

  React.useEffect(() => {
    trackPageView(location.pathname);
  }, [location]);
}

7. Advanced Patterns

Protected Routes (Auth Guard)

The most common pattern, redirect unauthenticated users before a protected page mounts:

import { Navigate, Outlet, useLocation } from 'react-router-dom';
import { useAuth } from './hooks/useAuth';

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

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

// Usage in routes:
<Route element={<ProtectedRoute />}>
  <Route path="/dashboard" element={<Dashboard />} />
  <Route path="/settings"  element={<Settings />} />
</Route>

Lazy Loading Routes

Code-split large pages with React.lazy and Suspense — the route’s JS is only fetched when needed:

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

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

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

Route-Level Error Boundaries (v6.4+)

import { useRouteError, isRouteErrorResponse } from 'react-router-dom';

function ErrorPage() {
  const error = useRouteError();

  if (isRouteErrorResponse(error)) {
    return (
      <div>
        <h1>{error.status} {error.statusText}</h1>
        <p>{error.data}</p>
      </div>
    );
  }

  return <p>Something went wrong: {error.message}</p>;
}

Scroll Restoration

React Router v6.4+ handles scroll restoration automatically when using createBrowserRouter. For older setups, a simple hook:

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

function ScrollToTop() {
  const { pathname } = useLocation();
  useEffect(() => window.scrollTo(0, 0), [pathname]);
  return null;
}

// Place inside BrowserRouter, before Routes
<BrowserRouter>
  <ScrollToTop />
  <App />
</BrowserRouter>

8. What Changed in v6?

React Router v6 was a major overhaul. If you’re upgrading from v5, here’s what changed:

9. Frequently Asked Questions