Tihomir Ivanov

Posted on May 26

React Router v7: A 5-Minute Guide

#reactrouter

React Router v7 introduces powerful and streamlined routing for modern React apps. Here's a fast, documentation-style breakdown — no project setup, just pure essentials.

1. Install React Router

npm install react-router-dom

2. Define Routes with <Router> and <Route>

Wrap your app with createBrowserRouter and RouterProvider:

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

const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    children: [
      { path: "about", element: <AboutPage /> },
      { path: "contact", element: <ContactPage /> },
    ],
  },
]);

<RouterProvider router={router} />

path – the URL segment.
element – the React component to render.
children – nested routes.

3. Layouts with Nested Routing

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

function RootLayout() {
  return (
    <>
      <Header />
      <Outlet /> {/* This renders child routes */}
    </>
  );
}

4. Access Params and Navigation

Use hooks to work with routing logic:

import { useParams, useNavigate } from "react-router-dom";

function UserProfile() {
  const { userId } = useParams(); // e.g., /users/:userId
  const navigate = useNavigate();

  return (
    <button onClick={() => navigate("/")}>Go Home</button>
  );
}

5. Load Data with Loaders

Loaders fetch data before rendering a route:

export async function userLoader({ params }) {
  return fetch(`/api/users/${params.userId}`);
}

const router = createBrowserRouter([
  {
    path: "/users/:userId",
    element: <UserPage />,
    loader: userLoader,
  },
]);

Access loader data using:

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

const user = useLoaderData();

6. Handle Form Actions

Forms can submit to the route’s action:

export async function loginAction({ request }) {
  const formData = await request.formData();
  const email = formData.get("email");
  // handle login
}

const router = createBrowserRouter([
  {
    path: "/login",
    element: <LoginForm />,
    action: loginAction,
  },
]);

Inside your form:

import { Form } from "react-router-dom";

<Form method="post">
  <input name="email" type="email" />
  <button type="submit">Login</button>
</Form>

7. Handle Errors with Error Boundaries

Add errorElement to show fallback UI:

{
  path: "/",
  element: <RootLayout />,
  errorElement: <ErrorPage />,
}

Use useRouteError() to access the error:

import { useRouteError } from "react-router-dom";

function ErrorPage() {
  const error = useRouteError();
  return <p>Error: {error.message}</p>;
}

Summary

React Router v7 is built for data-driven, component-first apps:

Feature	Use
Routing	`createBrowserRouter()`
Layouts	`<Outlet />`
Data Fetch	`loader`, `useLoaderData()`
Form Submit	`action`, `<Form />`
Navigation	`useNavigate()`
Params	`useParams()`
Errors	`errorElement`, `useRouteError()`

Based on: https://reactrouter.com/tutorials/address-book

DEV Community