React Router

React Router

React Router is the standard routing library for React. Version 6 introduced a component-based API with improved nested routing.

Installation

npm install react-router-dom

Basic Setup

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
        <Route path="/users/:id" element={<UserPage />} />
        <Route path="*" element={<NotFoundPage />} />
      </Routes>
    </BrowserRouter>
  );
}

Navigation

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

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

  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>

      {/* NavLink adds active class when route matches */}
      <NavLink
        to="/users"
        className={({ isActive }) => (isActive ? 'nav-active' : '')}
      >
        Users
      </NavLink>

      {/* Programmatic navigation */}
      <button onClick={() => navigate('/dashboard')}>Dashboard</button>
      <button onClick={() => navigate(-1)}>Back</button>
    </nav>
  );
}

Route Parameters

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

function UserPage() {
  const { id } = useParams<{ id: string }>();
  return <div>User ID: {id}</div>;
}

Nested Routes

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/dashboard" element={<DashboardLayout />}>
          <Route index element={<DashboardHome />} />
          <Route path="analytics" element={<Analytics />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

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

function DashboardLayout() {
  return (
    <div>
      <Sidebar />
      <main>
        <Outlet />
      </main>
    </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 })}
    />
  );
}
// URL: /search?q=react

Protected Routes

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

function ProtectedRoute() {
  const { user, isLoading } = useAuth();
  if (isLoading) return <Spinner />;
  if (!user) return <Navigate to="/login" replace />;
  return <Outlet />;
}

function App() {
  return (
    <Routes>
      <Route path="/login" element={<LoginPage />} />
      <Route element={<ProtectedRoute />}>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/profile" element={<Profile />} />
      </Route>
    </Routes>
  );
}

createBrowserRouter with Loaders (v6.4+)

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      { index: true, element: <Home /> },
      {
        path: 'users/:id',
        element: <UserPage />,
        loader: async ({ params }) => fetchUser(params.id!),
      },
    ],
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

Access loader data:

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

function UserPage() {
  const user = useLoaderData() as User;
  return <div>{user.name}</div>;
}

Navigation After Form Submit

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

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    await login(email, password);
    navigate('/dashboard');
  };

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