What is React Router v7? Declarative Routing Made Simple

What is React Router?

A routing library for React applications. It enables navigation between pages, supports full SPAs and works with JSX.

• Routing library for React
• Page-to-page navigation
• Full SPA support
• Works with JSX

What is Declarative Routing?

You define routes as JSX and the UI structure naturally maps to URLs. Less boilerplate, better readability.

• Define routes with JSX
• Easy to read and maintain
• Perfect for most React apps

Installation

Single package install — v7 also works without a framework.

npm install react-router

Basic Setup

Wrap your app with BrowserRouter so the router can use the History API.

import { BrowserRouter } from "react-router";
import { App } from "./App";

createRoot(document.getElementById("root")!).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

Defining Routes (Declarative Mode)

Routes and Route components let you map paths to elements declaratively.

import { Routes, Route } from "react-router";

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/users/:id" element={<UserDetail />} />
</Routes>

Navigation: Link

Use Link for in-app navigation. The browser doesn't reload — it's pure client-side routing.

import { Link } from "react-router";

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

useNavigate Hook

useNavigate gives you programmatic navigation — perfect for after-form-submit redirects, post-login flows and so on.

import { useNavigate } from "react-router";

const navigate = useNavigate();
navigate("/dashboard");
navigate(-1);            // back
navigate("/users", { replace: true });

Route Params

For routes with parameters like :id, read them with useParams. Using a generic for the typed shape is a good practice.

import { useParams } from "react-router";

function UserDetail() {
  const { id } = useParams();
  return <p>User id: {id}</p>;
}

Nested Routes

Nest Route inside Route to define hierarchical routes. The parent component renders children through Outlet.

<Routes>
  <Route path="dashboard" element={<DashboardLayout />}>
    <Route index element={<Overview />} />
    <Route path="settings" element={<Settings />} />
  </Route>
</Routes>

Outlet

Outlet is the placeholder where child routes render. It lets layout components compose UI piece by piece.

import { Outlet } from "react-router";

export function DashboardLayout() {
  return (
    <>
      <Sidebar />
      <main>
        <Outlet />
      </main>
    </>
  );
}

Protected Routes

Wrap auth-required routes with a small component. If the user isn't authenticated, Navigate redirects them to login.

function ProtectedRoute({ children }: { children: React.ReactNode }) {
  const isAuth = useAuth();
  if (!isAuth) return <Navigate to="/login" replace />;
  return <>{children}</>;
}

<Route
  path="/dashboard"
  element={
    <ProtectedRoute>
      <Dashboard />
    </ProtectedRoute>
  }
/>

Key Concepts

The backbone of the API:

• Routes & Route — path-to-element mapping
• Link — declarative navigation
• useNavigate — programmatic navigation
• useParams — URL parameters
• Outlet — child route placeholder
• Conditional routing — protected/redirect

Summary

React Router v7 offers declarative, readable, JSX-based routing. It's easy to set up, easy to scale and good enough for most React apps. If you're not on Next.js, it's the standard pick for SPAs.