Chapter 13

13 — React Router (v6+)

Client-side routing for React SPAs. React Router v6 uses a declarative, component-based approach with nested routes, loaders, and actions.

Core Concepts

Concept	Description
`BrowserRouter`	Wraps app, enables URL-based routing
`Routes` / `Route`	Declares URL → component mapping
`Link` / `NavLink`	Navigate without full page reload
`Outlet`	Renders child routes inside a layout
`useNavigate`	Programmatic navigation
`useParams`	Access URL parameters `/users/:id`
`useSearchParams`	Access query string `?page=2`
`useLocation`	Current URL, pathname, state
`loader` / `action`	Data fetching and mutations (v6.4+)

Route Matching

/users          → UserList
/users/:id      → UserDetail (id = dynamic)
/users/new      → CreateUser (static wins over dynamic)
/users/*        → Catch-all

Nested Routes & Layouts

&lt;Route path="/dashboard" element=&#123;&lt;DashboardLayout /&gt;&#125;&gt;
  &lt;Route index element=&#123;&lt;Overview /&gt;&#125; /&gt;          &#123;/* /dashboard */&#125;
  &lt;Route path="settings" element=&#123;&lt;Settings /&gt;&#125; /&gt; &#123;/* /dashboard/settings */&#125;
  &lt;Route path="profile" element=&#123;&lt;Profile /&gt;&#125; /&gt;   &#123;/* /dashboard/profile */&#125;
&lt;/Route&gt;

The parent layout renders <Outlet /> where child routes appear.

Protected Routes

Wrap routes in a guard component that checks auth and redirects:

&lt;Route element=&#123;&lt;RequireAuth /&gt;&#125;&gt;
  &lt;Route path="/dashboard" element=&#123;&lt;Dashboard /&gt;&#125; /&gt;
&lt;/Route&gt;

File

router.tsx — setup, nested routes, params, search params, navigation, protected routes, loaders, error boundaries, lazy loading

Previous12 — Custom Hooks Next 14 — Zustand