Data Routers

Data Routers, Loaders and Actions

Routing with React Router answered one question: which component belongs at this URL? The other half of a router's job is the data that component needs, and declarative mode leaves it to you — every screen fetches in an Effect, tracks its own flags, and starts only after it has mounted.

A data router moves fetching in front of rendering. A route's loader runs as soon as the URL matches — in parallel across the matched chain — and its action takes the write, after which every loader on the page runs again so the screen cannot go stale.

One navigation through a data router, from click to painted screen
One navigation through a data router, from click to painted screen

Every API below except useOutletContext throws outside a data router, so the first question is whether to opt in at all.

Subsections