Building a Multi-Page SPA with React Router

createBrowserRouter builds the router from an array of route objects, and <RouterProvider> renders it. Together they enable client-side routing: the URL changes and the matching component renders without a full page reload.

An alternative way to define routes using <Route> JSX elements, converted into route objects by createRoutesFromElements.

<Link to="..."> performs client-side navigation. It renders an <a> but prevents the full page reload.

A layout route wraps child routes with shared UI (navigation, footer). <Outlet /> marks where the matching child renders.

An index route is the default child rendered when the parent's path matches exactly. A catch-all route (path: '*') matches any URL no other route matches.

<NavLink> is a <Link> that knows whether it's active, for highlighting the current page in navigation.

useNavigate() returns a navigate function for changing routes from code, e.g. after a timer or a button click that does more than link.

A dynamic segment (:paramName) in a route path captures part of the URL, and useParams() reads it.

An absolute path starts with / and resolves from the root. A relative path has no leading / and resolves from the current route.

useSearchParams() reads and writes the URL's query string (?role=admin), and re-renders the component when it changes.

A route's loader runs before the route renders and fetches its data. The component reads the result with useLoaderData().

useNavigation() returns the router's current navigation state, so you can show feedback while a loader or action runs.

When a loader, action, or component throws, React Router renders the nearest errorElement. Inside it, useRouteError() returns what was thrown.

Loaders receive { params, request } for dynamic routes. Giving a route an id lets its children read its loader data with useRouteLoaderData(id).

A route's action handles form submissions. React Router's <Form> collects the inputs and sends them to the action, which usually returns redirect().

useSubmit() returns a function that triggers a route action from code, without a <Form>.

If an action returns data instead of a redirect, useActionData() gives the component that data, typically server validation errors.

useFetcher() calls a loader or action without navigating. It's an isolated mini-form for in-place updates.

A folder structure and set of conventions that keep routes, pages, and data logic separate.