DOCSEARCHbyAlgolia
Submit Docs

React Router Documentation

website·Indexed 42 days ago

https://reactrouter.com

Documentation for React Router, covering client-side routing, nested routes, and dynamic segments. Includes API references for components like Link, Outlet, and Form, as well as hooks such as useNavigate, useLoaderData, and useFetcher. Guides cover data loading with loaders, data writes via HTML Forms, and upgrading from v6 to v7.18.4.

Tokens
279.1K
Snippets
1.5K
Records
1.8K
Agent score
69%

What's inside React Router

  1. Overview of React Router Presets

    Presets allow developers to ease integration with other tools and hosting providers by automating the configuration of React Router. Presets can perform two primary actions: configure React Router config options and validate the final resolved configuration.

    Presets are merged in the order they are defined. Any configuration specified directly in the main React Router config is merged last, meaning user-defined config always takes precedence over presets.

  2. Overview of React Router deployment modes

    React Router applications can be deployed using two primary methods: Fullstack Hosting or Static Hosting. When using static hosting, React Router is deployed as a standard single-page application (SPA) with React.

  3. Overview of React Router Instrumentation

    Instrumentation in React Router allows developers to add logging, error reporting, and performance tracing (e.g., Sentry, DataDog, OpenTelemetry) without modifying route handlers. It uses 'wrapper' functions that execute around request handlers, router operations, and route middlewares.

    Key constraint: Instrumentation is read-only. You can observe the execution and results, but you cannot modify the arguments passed to or the data returned from route handlers.

  4. Overview of React Router usage modes

    React Router is a multi-strategy router for React that can be used as a full React framework or as a minimal routing library. Depending on the project needs, developers can choose from three primary modes of operation: Declarative, Data, and Framework.

  5. Overview of React Router Server Adapters

    React Router uses adapters to map a server's specific request/response format to the standard Web Fetch API. These adapters are imported into the server's entry point and are not used within the React Router application code itself. If you use the built-in React Router App Server (@react-router/serve), you do not need to interact with these adapters. Official adapters include @react-router/express, @react-router/cloudflare, and @react-router/architect.

  6. Overview of React Router Presets

    Presets in React Router are used to ease integration with other tools and hosting providers. They can perform two primary actions: configure React Router config options on behalf of the user and validate the final resolved configuration.

    Presets are merged in the order they are defined. Any configuration explicitly specified in the main React Router config is merged last, meaning user-defined config always takes precedence over preset config.

  7. Overview of React Router Instrumentation

    Instrumentation in React Router allows developers to add logging, error reporting, and performance tracing (e.g., Sentry, DataDog, New Relic, OpenTelemetry) without modifying route handlers. Instrumentation is designed to be read-only; it can observe application behavior but cannot modify the arguments passed to or data returned from route handlers. Because adding instrumentation introduces additional runtime code, it is recommended to perform testing or use conditional instrumentation to avoid negative UX impacts in production.

  8. Overview of the dataStrategy API

    The dataStrategy option in createBrowserRouter provides a low-level API to override React Router's default behavior of executing all matched loader functions in parallel. It is intended for advanced use cases such as implementing custom middleware, context injection, or caching layers. Because it overrides internal handler execution, it should be used with caution.

  9. Overview of React Router Instrumentation

    Instrumentation APIs in React Router allow developers to add logging, error reporting, and performance tracing to applications without modifying route handlers. This is useful for integrating with observability platforms like Sentry, DataDog, New Relic, or OpenTelemetry.

    Key constraints:

    • Experimental: These APIs are experimental and subject to breaking changes in minor/patch releases.
    • Read-only: Instrumentation is designed to be read-only; you can observe events but cannot modify the arguments passed to or data returned from route handlers.
    • Performance: Adding instrumentation code at runtime may impact performance; conditional instrumentation is recommended for production.

  10. Overview of entry.server.tsx

    The entry.server.tsx file is the server-side entry point for a React Router application. It controls how the application generates HTTP responses on the server by rendering the markup for the current page using a <ServerRouter> element. This markup is optionally re-hydrated in the browser via the client entry module.

    This file is optional for Node.js environments (where a default implementation is used) but is required for other runtimes, such as Cloudflare.

  11. Overview of React Router Fetchers

    Fetchers allow developers to create complex, dynamic user interfaces that require multiple, concurrent data interactions without causing a navigation. They track their own independent state and can be used to load data, mutate data, and submit forms by interacting with loaders and actions.

  12. Overview of React Router usage modes

    React Router is a multi-strategy router for React that can be used as a full React framework or as a minimal routing library. Depending on the project requirements, developers can choose from three primary usage modes: Declarative, Data, and Framework.