Skip to contents

Route

Source: R/components.R
Route.Rd

https://api.reactrouter.com/v7/functions/react-router.Route.html

Usage

Route(
  ...,
  element,
  loader = NULL,
  action = NULL,
  errorElement = NULL,
  key = randomKey()
)

Arguments

...

Additional Route props (see Details).

element

The element to render when the route matches. Wrapped on the JS side in a no-DOM Keyed component so React remounts the subtree on every route change – this is required for Shiny output bindings (e.g. textOutput()) to reinitialise correctly when two routes render the same component shape with different namespaces. Unlike the previous <div> wrapper, Keyed adds no DOM node, so layouts like MUI Grid that require typed direct children keep working.

loader

Optional. A JS expression evaluating to a loader function, e.g. JS("({ params }) => fetch(...)"). For a plain unconditional redirect, use redirect. To embed static R data, serialize it first with jsonlite::toJSON() and wrap the result in JS().

action

Optional. A JS expression evaluating to an action function called by Form submissions and useSubmit / useFetcher submits.

errorElement

Optional. Element rendered when the route's loader, action, or rendering throws.

key

Stable React key for the route's element. Defaults to a random alphanumeric string per Route() call, so each route's element has a distinct identity from its siblings – this is what causes React to unmount the previous route's subtree (and reinitialise its Shiny output bindings) when navigating between routes that render the same component shape. You almost never need to pass this explicitly. Note: this key only affects identity of the route's element; it does not rebuild the RouterProvider data router. The route tree is created once on mount and subsequent Route() edits are ignored; to apply a new route tree at runtime, give RouterProvider itself a changing key (e.g. via shiny::renderUI).

Value

A Route component.

Details

Internally the `element` is wrapped in a `shiny::div()` with a UUID key so, in case R shiny is used, shiny can differentiate each element.

Additional React Router Route props can be passed through ...:

  • path (Character): path pattern, supports :param, optional :param?, and splat *.

  • index (Boolean): mark this as the index route of its parent.

  • caseSensitive (Boolean): match the path case-sensitively.

  • id (Character): stable route id, required for use with useRouteLoaderData.

  • handle (Any): arbitrary value exposed via useMatches for breadcrumbs and similar use cases.

  • shouldRevalidate (JS): function controlling whether the loader re-runs on a given navigation.

  • lazy (JS): code-splitting hook returning a Promise resolving to a route module.

  • hasErrorBoundary (Boolean): explicit error-boundary flag (rarely needed when errorElement is provided).