React Router Patterns

Quick Guide: This skill covers React Router v7 Data Mode — createBrowserRouter plus loaders, actions, fetchers and pending states, without a full framework. Four v7 facts change the answer: every export comes from "react-router", with the DOM-only ones — RouterProvider included — also on "react-router/dom", while react-router-dom survives v7 as a deprecated re-export and is deleted in v8; json() and defer() are removed so loaders return plain objects; form method values are uppercase ("POST"); and loaders skip revalidation after an action error unless shouldRevalidate opts back in.

Detailed Resources:

• examples/core.md — router setup, root layout, root error boundary, and the two v7 migration traps
• examples/data-loading.md — loaders, actions, <Form>, useFetcher, optimistic UI, shouldRevalidate, deferred data
• examples/navigation.md — Link, NavLink, useNavigate, redirect, useSearchParams wired to loaders
• examples/error-handling.md — error bubbling, thrown responses, pending UI, route.lazy
• examples/layouts.md — Outlet, useOutletContext, pathless auth layouts, useBlocker
• reference.md — route options, hook and component tables, createBrowserRouter options

Which path applies

React Router ships three modes, and only one of them has the data APIs.