react-router-v7

Data-driven routing with loaders fetches data before rendering routes. Define loaders on route objects, pass them to createBrowserRouter, access data with useLoaderData in components, and render with RouterProvider to enable automatic data fetching tied to navigation.

Loaders fetch data before a route renders, triggered on navigation. Actions handle form submissions and mutations, execute on form submit, and return data accessible via useActionData. Together they enable a complete data flow from navigation through user interaction.

Nested routes create parent-child route hierarchies. Use Outlet in parent components to render child route content. Define loaders and actions at each level; child data flows independently while parent layout persists, enabling shared navigation and consistent page structure.

Protected routes use loaders to check authentication state before rendering. Return a redirect() from the loader if the user lacks permission, automatically sending them to login or a fallback page without rendering the protected component.

Fetchers trigger actions without navigating away from the current route. Use useFetcher to submit forms, access response data with fetcher.data, and update UI optimistically while the action executes in the background, improving perceived responsiveness.

React Router v7 supports full TypeScript typing for loaders, actions, and route definitions. Access URL search params via useSearchParams hook to read and update query strings without navigation, enabling filtering, pagination, and state preservation in URLs.