React Router Tutorial: The Complete Routing Guide for 2026

Routing is the backbone of every React application. Without it, your app is a single page with no way to navigate. At Boundev, React Router is a non-negotiable part of our frontend stack. This guide covers everything you need to know—from basic setup to advanced patterns like data loaders and actions.

Why React Router?

React itself has no built-in routing. Libraries like React Router fill that gap by mapping URL paths to components, enabling the seamless, instant navigation users expect from modern web applications. As of 2026, React Router v7 is the gold standard, offering a "data router" architecture that couples routing with data fetching and mutations.

1. Setting Up React Router

The modern approach uses createBrowserRouter and RouterProvider. This "data router" setup unlocks loaders, actions, and error boundaries.

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Root from './routes/Root';
import Dashboard from './routes/Dashboard';
import ErrorPage from './routes/ErrorPage';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    errorElement: <ErrorPage />,
    children: [
      { path: 'dashboard', element: <Dashboard /> },
    ],
  },
]);

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

2. Nested Routes and Layouts

Nested routes are perhaps React Router's most powerful feature. They allow you to define a layout once (e.g., a sidebar and header) and have child routes render inside it via the <Outlet /> component.

// Root.jsx — The shared layout
import { Outlet, Link } from 'react-router-dom';

export default function Root() {
  return (
    <div className="app-layout">
      <nav>
        <Link to="/dashboard">Dashboard</Link>
        <Link to="/settings">Settings</Link>
      </nav>
      <main>
        <Outlet /> {/* Child routes render here */}
      </main>
    </div>
  );
}

3. Data Loading with Loaders

Before React Router's data APIs, developers had to fetch data inside useEffect, which caused the dreaded pattern of: render → show spinner → fetch → re-render. Loaders fix this by fetching data before the component mounts.

// Route definition with a loader
{
  path: 'dashboard',
  element: <Dashboard />,
  loader: async () => {
    const res = await fetch('/api/stats');
    return res.json();
  },
}

// Dashboard.jsx — Consuming loader data
import { useLoaderData } from 'react-router-dom';

export default function Dashboard() {
  const stats = useLoaderData();
  return <h1>Revenue: ${stats.revenue}</h1>;
}

4. Mutations with Actions

Actions handle data writes (POST, PUT, DELETE). When a user submits a <Form>, React Router calls the associated action, then automatically revalidates all loaders to keep the UI fresh.

import { Form, redirect } from 'react-router-dom';

// Route definition
{
  path: 'contacts/new',
  element: <NewContact />,
  action: async ({ request }) => {
    const formData = await request.formData();
    await createContact(Object.fromEntries(formData));
    return redirect('/contacts');
  },
}

// NewContact.jsx
export default function NewContact() {
  return (
    <Form method="post">
      <input name="name" placeholder="Name" />
      <button type="submit">Save</button>
    </Form>
  );
}

5. Dynamic Routes and URL Parameters

Dynamic segments (e.g., /users/:userId) let you build detail pages. The useParams hook extracts the value from the URL.

// Route
{ path: 'users/:userId', element: <UserProfile /> }

// UserProfile.jsx
import { useParams } from 'react-router-dom';

export default function UserProfile() {
  const { userId } = useParams();
  // Fetch user data using userId...
}

6. Protected Routes

For authenticated sections, use a loader to check the user's session. If they're not logged in, redirect them to the login page. This approach is more secure than client-side guards because it runs before any component renders.

{
  path: 'admin',
  element: <AdminPanel />,
  loader: async () => {
    const user = await getUser();
    if (!user) throw redirect('/login');
    return user;
  },
}

7. Error Handling

React Router lets you define an errorElement per route. If a loader throws or a component crashes, the error element renders instead of a blank screen.

{
  path: 'dashboard',
  element: <Dashboard />,
  errorElement: <ErrorPage />, // Displays if loader or component throws
  loader: dashboardLoader,
}

Essential Hooks Cheat Sheet

Frequently Asked Questions