| Title: | 'React Router' for 'shiny' Apps and 'Quarto' |
|---|---|
| Description: | Provides a wrapper around the 'react-router-dom' 'React' library for use in 'Shiny' applications and 'Quarto' documents. Enables client-side routing with hash, memory, and browser history strategies, nested routes, dynamic segments, data loaders, actions, and navigation hooks. |
| Authors: | Felix Luginbuhl [aut, cre, cph] (ORCID: <https://orcid.org/0009-0008-6625-2899>), Andryas Waurzenczak [ctb] |
| Maintainer: | Felix Luginbuhl <[email protected]> |
| License: | MIT + file LICENSE |
| Version: | 0.2.0 |
| Built: | 2026-05-10 10:13:20 UTC |
| Source: | https://github.com/lgnbhl/reactrouter |
https://api.reactrouter.com/v7/functions/react-router.Await.html
Await( into = NULL, as = "children", resolveKey, selector = NULL, render = NULL, errorElement = NULL, fallback = NULL, ... )Await( into = NULL, as = "children", resolveKey, selector = NULL, render = NULL, errorElement = NULL, fallback = NULL, ... )
into |
A component (HTML tag or shiny.react-based element) that will receive the hook data as the specified prop. |
as |
Character. The name of the component's prop to inject the hook
data into (by default |
resolveKey |
Character. The key in the loader's return value that holds
the promise (e.g. if the loader returns |
selector |
Character. Optional key to extract from the hook data object.
If |
render |
Optional |
errorElement |
Element to render if the promise rejects. |
fallback |
Element shown while the promise is pending. Defaults to a
plain |
... |
Additional props to pass to the component. |
Renders into when a deferred loader promise resolves, injecting the
resolved value (or a selector from it) as a prop.
Use inside a Route whose loader returns an object
containing a promise (written via JS). In React Router v7,
simply return the object directly – no defer() wrapper is needed.
https://api.reactrouter.com/v7/functions/react-router.BrowserRouter.html
BrowserRouter(...)BrowserRouter(...)
... |
Props to pass to element. |
A BrowserRouter component.
https://api.reactrouter.com/v7/functions/react-router.createBrowserRouter.html
createBrowserRouter(...)createBrowserRouter(...)
... |
|
Creates a browser router using the data router API.
Use with createRoutesFromElements and Route.
A createBrowserRouter component.
https://api.reactrouter.com/v7/functions/react-router.createHashRouter.html
createHashRouter(...)createHashRouter(...)
... |
|
Creates a hash router using the data router API.
Use with createRoutesFromElements and Route.
A createHashRouter component.
https://api.reactrouter.com/v7/functions/react-router.createMemoryRouter.html
createMemoryRouter(...)createMemoryRouter(...)
... |
|
Creates a memory router using the data router API. Routing state is kept
in memory and the browser URL is never read or modified, making it suitable
for static HTML pages (file://), Quarto documents, and embedded
widgets where the real URL is irrelevant.
Use with createRoutesFromElements and Route.
A createMemoryRouter component.
https://api.reactrouter.com/v7/variables/react-router.createRoutesFromElements.html
createRoutesFromElements(...)createRoutesFromElements(...)
... |
|
Optional compatibility alias. In R, createHashRouter,
createBrowserRouter, and createMemoryRouter
accept Route elements directly, so wrapping them in
createRoutesFromElements() is not required. The function is kept
so that examples copied verbatim from the React Router v7 documentation
(createHashRouter(createRoutesFromElements(...))) keep working.
The actual JSX-to-route-object conversion always happens on the JavaScript side; this R function simply bundles its arguments into a tag list.
A tag list of Route elements.
https://api.reactrouter.com/v7/functions/react-router.data.html
dataResponse(value, init = NULL)dataResponse(value, init = NULL)
value |
The payload to expose via |
init |
Optional. Either a list with |
Returns a JS loader function that resolves to a React Router
data() response – a thin wrapper that lets you attach an HTTP
status, statusText, and/or headers alongside the
loader/action payload while still exposing value via
useLoaderData / useActionData.
Use the R helper for static loaders that always return the same value plus
status. For values computed inside a custom loader/action, call
window.jsmodule['@/reactRouter'].helpers.data(value, init) directly
in your JS() string, e.g.
loader = JS("async () => {
const { data } = window.jsmodule['@/reactRouter'].helpers;
const rows = await fetchRows();
return data({ rows }, { status: 200 });
}")
A JS expression suitable for the loader or
action argument of Route.
## Not run: Route( path = "/profile", loader = dataResponse( list(name = "Ada", role = "Engineer"), init = list(status = 200) ), element = useLoaderData(tags$pre()) ) ## End(Not run)## Not run: Route( path = "/profile", loader = dataResponse( list(name = "Ada", role = "Engineer"), init = list(status = 200) ), element = useLoaderData(tags$pre()) ) ## End(Not run)
https://api.reactrouter.com/v7/variables/react-router.Form.html
Form(...)Form(...)
... |
Props to pass to element. |
A Form component.
https://api.reactrouter.com/v7/functions/react-router.HashRouter.html
HashRouter(...)HashRouter(...)
... |
Props to pass to element. |
A HashRouter component.
https://api.reactrouter.com/v7/functions/react-router.isRouteErrorResponse.html
isRouteErrorResponse()isRouteErrorResponse()
Returns a JS reference to the isRouteErrorResponse
type guard. Use it inside an errorElement render callback to branch
on whether the error came from a thrown Response
(e.g. throw new Response(..., { status: 404 })) or from arbitrary
code. Pair with useRouteError.
Calling isRouteErrorResponse() from R returns a JS
expression that evaluates, in the browser, to the upstream
isRouteErrorResponse function. Interpolate it inside the
render string of useRouteError() as shown below.
For convenience, the same function is also reachable inside any
user-authored JS string as
window.jsmodule['@/reactRouter'].helpers.isRouteErrorResponse.
A JS expression evaluating to the
isRouteErrorResponse function reference.
## Not run: useRouteError(render = JS(paste0( "e => ", isRouteErrorResponse(), "(e) ? <p>HTTP {e.status}</p> : <p>Unknown error</p>" ))) ## End(Not run)## Not run: useRouteError(render = JS(paste0( "e => ", isRouteErrorResponse(), "(e) ? <p>HTTP {e.status}</p> : <p>Unknown error</p>" ))) ## End(Not run)
https://api.reactrouter.com/v7/variables/react-router.Link.html
https://api.reactrouter.com/v7/variables/react-router.Link.html
Repeat clicks. The Shiny input value is the link's to
string. Clicking the same link twice publishes the same value, and Shiny
suppresses identical-value updates by default — your
observeEvent(input$myLink, ...) will fire only on the first click.
If you need to react to every click (e.g. logging, refreshing a panel),
bind to a counter or use shiny::observeEvent(..., ignoreNULL = FALSE,
priority = "event") alongside an explicit click counter, or wrap the
click target in a regular shiny::actionButton() that triggers the
navigation programmatically.
Link(..., reloadDocument = FALSE) Link.shinyInput(inputId, ..., reloadDocument = FALSE) updateLink.shinyInput( session = shiny::getDefaultReactiveDomain(), inputId, ... )Link(..., reloadDocument = FALSE) Link.shinyInput(inputId, ..., reloadDocument = FALSE) updateLink.shinyInput( session = shiny::getDefaultReactiveDomain(), inputId, ... )
... |
Props to pass to element. |
reloadDocument |
Boolean. Default FALSE. Let browser handle the transition normally |
inputId |
ID of the component. |
session |
For |
The 'reloadDocument' prop controls whether clicking the link uses React Router's client-side navigation ('FALSE', the default) or skips it and lets the browser handle the click natively ('TRUE'). The default is correct for almost every use, including Shiny apps with server-rendered output ('uiOutput', 'renderUI', 'plotOutput', htmlwidgets) — Shiny output bindings re-attach automatically when React Router mounts the new route's element. See 'vignette("routers", package = "reactRouter")' for details.
Two flavors. Pick Link() for a plain navigation link
(the common case, mirroring React Router's API one-to-one). Pick
Link.shinyInput() only when you also need the click to fire a
Shiny input on the server — it adds an inputId that updates with
the link's to every time it is clicked, while still navigating.
If in doubt, use Link().
A Link component.
https://api.reactrouter.com/v7/functions/react-router.MemoryRouter.html
MemoryRouter(...)MemoryRouter(...)
... |
Props to pass to element. |
A MemoryRouter component.
https://api.reactrouter.com/v7/functions/react-router.Outlet.html
Outlet(...)Outlet(...)
... |
Props to pass to element. |
A Outlet component.
When called interactively, renders the component in the IDE viewer panel. Otherwise, falls back to standard shiny.tag printing (raw HTML text).
## S3 method for class 'reactRouter' print(x, browse = interactive(), ...)## S3 method for class 'reactRouter' print(x, browse = interactive(), ...)
x |
A reactRouter object (also inherits shiny.tag). |
browse |
Whether to render in viewer. Defaults to TRUE in interactive sessions. |
... |
Additional arguments passed to print. |
Only the router-root constructors carry the "reactRouter" S3 class
and therefore dispatch to this method:
RouterProvider, createHashRouter,
createBrowserRouter, createMemoryRouter,
HashRouter, BrowserRouter, and
MemoryRouter. Inner pieces (Route,
Link, Outlet, hooks, ...) are plain
shiny.tag elements – printing one of those on its own is rarely
useful (it has no router context to render against), so they intentionally
fall through to the default shiny.tag print method.
Invisibly returns x.
react-router-dom JS dependency
reactRouterDependency()reactRouterDependency()
HTML dependency object.
Launch a Shiny example app or list the available examples. Use 'reactRouter::reactRouterExample("basic")' to run a showcase app.
reactRouterExample(example = NULL, ...)reactRouterExample(example = NULL, ...)
example |
The name of the example to run, or 'NULL' to print and invisibly return the list of available examples. |
... |
Additional arguments to pass to 'shiny::runApp()'. |
When 'example' is 'NULL', invisibly returns a character vector of example names (also printed via 'message()'). Otherwise this function normally does not return; interrupt R to stop the application (usually by pressing Ctrl+C or Esc).
shiny.blueprint::runExample(), which this function is
adapted from.
https://reactrouter.com/api/utils/redirect
redirect(to)redirect(to)
to |
Character. Destination path. |
Returns a JS loader function that redirects to to.
Pass as the loader argument of a Route to perform
an unconditional redirect – typically used for guard routes that always
send the user somewhere else.
Security: to must be a trusted, package-author-controlled
string. javascript:, data:, and vbscript: URL schemes
are rejected. If you build to from user-supplied input, validate it
yourself before passing it in – never round-trip untrusted strings through
redirect() into a navigation.
For conditional redirects inside a custom loader/action, call
window.jsmodule['@/reactRouter'].helpers.redirect(to) from your own
JS() string, e.g.
loader = JS(
"async () => {
const { redirect } = window.jsmodule['@/reactRouter'].helpers;
if (!authed()) return redirect('/login'); ...
}"
)
The data, replace, and redirectDocument helpers are
exposed on the same namespace.
A JS expression suitable for the loader
argument of Route.
## Not run: Route(path = "/old", loader = redirect("/new"), element = NULL) ## End(Not run)## Not run: Route(path = "/old", loader = redirect("/new"), element = NULL) ## End(Not run)
https://reactrouter.com/api/utils/redirectDocument
redirectDocument(to)redirectDocument(to)
to |
Character. Destination path or absolute URL. |
Returns a JS loader function that performs a document
redirect to to – a full page reload, as opposed to the client-side
navigation that redirect performs. Use when navigating to a
URL outside the router's control (e.g. a server-rendered page) so the
browser fully unloads the SPA.
For conditional document redirects inside a custom loader/action, call
window.jsmodule['@/reactRouter'].helpers.redirectDocument(to) from
your own JS() string.
A JS expression suitable for the loader
argument of Route.
## Not run: Route( path = "/docs", loader = redirectDocument("/static/docs/index.html"), element = NULL ) ## End(Not run)## Not run: Route( path = "/docs", loader = redirectDocument("/static/docs/index.html"), element = NULL ) ## End(Not run)
https://reactrouter.com/api/utils/replace
replaceResponse(to)replaceResponse(to)
to |
Character. Destination path. |
Returns a JS loader function that performs a replace
navigation to to – same as redirect, but the new
entry replaces the current one in the history stack instead of pushing
a new one. Use for "alias" routes where the original URL should not
remain in the user's back-history.
Renamed from replace() to avoid masking base::replace.
This mirrors the dataResponse() naming for the same reason.
For conditional replacements inside a custom loader/action, call
window.jsmodule['@/reactRouter'].helpers.replace(to) from your own
JS() string.
A JS expression suitable for the loader
argument of Route.
## Not run: Route(path = "/legacy", loader = replaceResponse("/new"), element = NULL) ## End(Not run)## Not run: Route(path = "/legacy", loader = replaceResponse("/new"), element = NULL) ## End(Not run)
https://api.reactrouter.com/v7/functions/react-router.Route.html
Route( ..., element, loader = NULL, action = NULL, errorElement = NULL, key = randomKey() )Route( ..., element, loader = NULL, action = NULL, errorElement = NULL, key = randomKey() )
... |
Additional Route props (see Details). |
element |
The element to render when the route matches. Wrapped on
the JS side in a no-DOM |
loader |
Optional. A |
action |
Optional. A |
errorElement |
Optional. Element rendered when the route's
|
key |
Stable React key for the route's |
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).
A Route component.
https://api.reactrouter.com/v7/functions/react-router.RouterProvider.html
RouterProvider(router, fallbackElement = NULL)RouterProvider(router, fallbackElement = NULL)
router |
A router element produced by |
fallbackElement |
Element shown while the initial route's loader is resolving. |
Renders a data router. Mirrors the React Router v7 composition pattern:
pass a router built with createHashRouter,
createBrowserRouter, or createMemoryRouter to
the router argument.
The underlying router is created once on mount and is not rebuilt when
Route() children change at runtime — React Router data routers own
their own navigation state and must be stable. To swap the route tree
dynamically (e.g. based on Shiny inputs), remount RouterProvider
itself, for instance by toggling its parent via shiny::renderUI.
A RouterProvider component.
https://api.reactrouter.com/v7/functions/react-router.Routes.html
Routes(...)Routes(...)
... |
Props to pass to element. |
A Routes component.
https://api.reactrouter.com/v7/functions/react-router.ScrollRestoration.html
ScrollRestoration(...)ScrollRestoration(...)
... |
Props to pass to element. Notable props: |
Emulates the browser's scroll restoration on location changes after loaders
have completed. Place once inside the root layout of a data router app.
Requires a data router (createBrowserRouter,
createHashRouter, etc.).
A ScrollRestoration component.
https://api.reactrouter.com/v7/functions/react-router.useActionData.html
useActionData( into = NULL, as = "children", selector = NULL, render = NULL, ... )useActionData( into = NULL, as = "children", selector = NULL, render = NULL, ... )
into |
A component (HTML tag or shiny.react-based element) that will receive the hook data as the specified prop. |
as |
Character. The name of the component's prop to inject the hook
data into (by default |
selector |
Character. Optional key to extract from the hook data object.
If |
render |
Optional |
... |
Additional props to pass to the component. |
Calls the useActionData() hook and injects the result (or a
selector from it) as a prop of the into component.
Use inside a Route that has an action.
https://api.reactrouter.com/v7/functions/react-router.useAsyncError.html
useAsyncError( into = NULL, as = "children", selector = NULL, render = NULL, ... )useAsyncError( into = NULL, as = "children", selector = NULL, render = NULL, ... )
into |
A component (HTML tag or shiny.react-based element) that will receive the hook data as the specified prop. |
as |
Character. The name of the component's prop to inject the hook
data into (by default |
selector |
Character. Optional key to extract from the hook data object.
If |
render |
Optional |
... |
Additional props to pass to the component. |
Calls the useAsyncError() hook and injects the rejection reason
(or a selector from it) as a prop of the into
component. Must be rendered inside the errorElement of an
Await so the hook can pick up the rejected promise's error.
https://api.reactrouter.com/v7/functions/react-router.useAsyncValue.html
useAsyncValue( into = NULL, as = "children", selector = NULL, render = NULL, ... )useAsyncValue( into = NULL, as = "children", selector = NULL, render = NULL, ... )
into |
A component (HTML tag or shiny.react-based element) that will receive the hook data as the specified prop. |
as |
Character. The name of the component's prop to inject the hook
data into (by default |
selector |
Character. Optional key to extract from the hook data object.
If |
render |
Optional |
... |
Additional props to pass to the component. |
Calls the useAsyncValue() hook and injects the resolved value (or a
selector from it) as a prop of the into component.
Must be rendered inside an Await that has been called in
children mode (no into / render on Await) – the
hook reads the value resolved by the closest <Await> ancestor.
https://api.reactrouter.com/v7/functions/react-router.useBlocker.html
useBlocker( into = NULL, as = "children", selector = "state", render = NULL, shouldBlock = FALSE, ... )useBlocker( into = NULL, as = "children", selector = "state", render = NULL, shouldBlock = FALSE, ... )
into |
A component (HTML tag or shiny.react-based element) that will receive the hook data as the specified prop. |
as |
Character. The name of the component's prop to inject the hook
data into (by default |
selector |
Character. Optional key to extract from the hook data object.
If |
render |
Optional |
shouldBlock |
Either |
... |
Additional props to pass to the component. |
Calls the useBlocker() hook and injects the blocker's state
(or another selector field) as a prop of the into
component. Use to intercept navigation – e.g. warn the user about unsaved
changes before they leave a route.
The blocker state is one of "unblocked" (default),
"blocked" (navigation intercepted), or "proceeding"
(user confirmed, navigation in progress).
https://api.reactrouter.com/v7/functions/react-router.useFetcher.html
useFetcher( into = NULL, as = "children", selector = "state", render = NULL, fetcherKey = NULL, ... )useFetcher( into = NULL, as = "children", selector = "state", render = NULL, fetcherKey = NULL, ... )
into |
A component (HTML tag or shiny.react-based element) that will receive the hook data as the specified prop. |
as |
Character. The name of the component's prop to inject the hook
data into (by default |
selector |
Character. Optional key to extract from the hook data object.
If |
render |
Optional |
fetcherKey |
Character. Optional key to share a fetcher across
components (e.g. |
... |
Additional props to pass to the component. |
Calls the useFetcher() hook and injects the result (or a
selector from it) as a prop of the into component.
Use to fetch data or submit forms without causing a navigation.
The fetcher object has state ("idle"/"loading"/"submitting") and
data (the response from a loader or action).
selector defaults to "state" so the default into/
children display shows a readable string ("idle" /
"loading" / "submitting"). The full fetcher object contains
methods (submit, load, Form) that would be silently
dropped by JSON serialization if the whole object were rendered as
children. To call those methods, use the render = JS(...) form,
which receives the full fetcher: render = JS("f => <button onClick={() => f.load('/data')}>Reload</button>").
https://api.reactrouter.com/v7/functions/react-router.useFetchers.html
useFetchers(into = NULL, as = "children", selector = NULL, render = NULL, ...)useFetchers(into = NULL, as = "children", selector = NULL, render = NULL, ...)
into |
A component (HTML tag or shiny.react-based element) that will receive the hook data as the specified prop. |
as |
Character. The name of the component's prop to inject the hook
data into (by default |
selector |
Character. Optional key to extract from the hook data object.
If |
render |
Optional |
... |
Additional props to pass to the component. |
Calls the useFetchers() hook and injects the result (or a
selector mapped over each fetcher) as a prop of the
into component. Returns an array of all active fetchers.
Useful for showing a global loading indicator.
https://api.reactrouter.com/v7/functions/react-router.useHref.html
useHref(into = NULL, as = "children", to, render = NULL, ...)useHref(into = NULL, as = "children", to, render = NULL, ...)
into |
A component (HTML tag or shiny.react-based element) that will receive the hook value as the specified prop. |
as |
Character. The name of the component's prop to inject the hook
value into. Defaults to |
to |
Character. The path to resolve. |
render |
Optional |
... |
Additional props to pass to the component. |
Calls the useHref() hook and injects the resolved href string
as a prop of the into component.
https://api.reactrouter.com/v7/functions/react-router.useInRouterContext.html
useInRouterContext(into = NULL, as = "children", render = NULL, ...)useInRouterContext(into = NULL, as = "children", render = NULL, ...)
into |
A component (HTML tag or shiny.react-based element) that will receive the hook value as the specified prop. |
as |
Character. The name of the component's prop to inject the hook
value into. Defaults to |
render |
Optional |
... |
Additional props to pass to the component. |
Calls the useInRouterContext() hook and injects the boolean result
as a prop of the into component. Useful inside reusable
components that may be rendered with or without a surrounding router –
guard router-only logic with this check before calling other hooks.
https://api.reactrouter.com/v7/functions/react-router.useLinkClickHandler.html
useLinkClickHandler( into = NULL, as = "children", render = NULL, to, replace = NULL, state = NULL, target = NULL, preventScrollReset = NULL, relative = NULL, ... )useLinkClickHandler( into = NULL, as = "children", render = NULL, to, replace = NULL, state = NULL, target = NULL, preventScrollReset = NULL, relative = NULL, ... )
into |
A component (HTML tag or shiny.react-based element) that will receive the hook value as the specified prop. |
as |
Character. The name of the component's prop to inject the hook
value into. Defaults to |
render |
Optional |
to |
Character. Destination path. |
replace |
Optional boolean. Replace the current entry in the history stack instead of pushing a new one. |
state |
Optional. State value to attach to the new location. |
target |
Optional character. Anchor target (e.g. |
preventScrollReset |
Optional boolean. If |
relative |
Optional character. Either |
... |
Additional props to pass to the component. |
Calls the useLinkClickHandler() hook and exposes the returned click
handler function via render (or injects it as a prop of
into, e.g. as = "onClick"). Lets you build link-like
components that drive client-side navigation without using
Link.
Because the hook returns a function, the render form is the natural
fit:
useLinkClickHandler(
to = "/about",
render = JS("h => <span onClick={h} role='link'>About</span>")
)
https://api.reactrouter.com/v7/functions/react-router.useLoaderData.html
useLoaderData( into = NULL, as = "children", selector = NULL, render = NULL, ... )useLoaderData( into = NULL, as = "children", selector = NULL, render = NULL, ... )
into |
A component (HTML tag or shiny.react-based element) that will receive the hook data as the specified prop. |
as |
Character. The name of the component's prop to inject the hook
data into (by default |
selector |
Character. Optional key to extract from the hook data object.
If |
render |
Optional |
... |
Additional props to pass to the component. |
Calls the useLoaderData() hook and injects the result (or a
selector from it) as a prop of the into component.
Use inside a Route that has a loader.
## Not run: # Display a selector as text useLoaderData(tags$h3(), selector = "name") # Pass an array to a data grid useLoaderData( muiDataGrid::DataGrid(columns = JS("[ { field: 'name', headerName: 'Name', flex: 1 } ]")), as = "rows", selector = "people" ) ## End(Not run)## Not run: # Display a selector as text useLoaderData(tags$h3(), selector = "name") # Pass an array to a data grid useLoaderData( muiDataGrid::DataGrid(columns = JS("[ { field: 'name', headerName: 'Name', flex: 1 } ]")), as = "rows", selector = "people" ) ## End(Not run)
https://api.reactrouter.com/v7/functions/react-router.useLocation.html
useLocation(into = NULL, as = "children", selector = NULL, render = NULL, ...)useLocation(into = NULL, as = "children", selector = NULL, render = NULL, ...)
into |
A component (HTML tag or shiny.react-based element) that will receive the hook data as the specified prop. |
as |
Character. The name of the component's prop to inject the hook
data into (by default |
selector |
Character. Optional key to extract from the hook data object.
If |
render |
Optional |
... |
Additional props to pass to the component. |
Calls the useLocation() hook and injects the result (or a
selector from it) as a prop of the into component.
Available selectors: pathname, search, hash,
state, key.
https://api.reactrouter.com/v7/functions/react-router.useMatch.html
useMatch( into = NULL, as = "children", selector = NULL, render = NULL, pattern, ... )useMatch( into = NULL, as = "children", selector = NULL, render = NULL, pattern, ... )
into |
A component (HTML tag or shiny.react-based element) that will receive the hook data as the specified prop. |
as |
Character. The name of the component's prop to inject the hook
data into (by default |
selector |
Character. Optional key to extract from the hook data object.
If |
render |
Optional |
pattern |
Character. The path pattern to match against
(e.g. |
... |
Additional props to pass to the component. |
Calls the useMatch() hook and injects the result (or a
selector from it) as a prop of the into component.
Returns NULL if no match.
https://api.reactrouter.com/v7/functions/react-router.useMatches.html
useMatches(into = NULL, as = "children", selector = NULL, render = NULL, ...)useMatches(into = NULL, as = "children", selector = NULL, render = NULL, ...)
into |
A component (HTML tag or shiny.react-based element) that will receive the hook data as the specified prop. |
as |
Character. The name of the component's prop to inject the hook
data into (by default |
selector |
Character. Optional key to extract from the hook data object.
If |
render |
Optional |
... |
Additional props to pass to the component. |
Calls the useMatches() hook and injects the result (or a
selector extracted from each match) as a prop of the
into component. Only works inside a data router.
https://api.reactrouter.com/v7/functions/react-router.useOutlet.html
useOutlet(into = NULL, as = "children", render = NULL, context = NULL, ...)useOutlet(into = NULL, as = "children", render = NULL, context = NULL, ...)
into |
A component (HTML tag or shiny.react-based element) that will receive the hook value as the specified prop. |
as |
Character. The name of the component's prop to inject the hook
value into. Defaults to |
render |
Optional |
context |
Optional value to expose to descendants via
|
... |
Additional props to pass to the component. |
Calls the useOutlet() hook and injects the matched child route's
element as a prop of the into component (or passes it to
render). Returns NULL when no child route matches – useful for
rendering a fallback inside a layout when the user is on the parent route.
Differs from the Outlet component in that it returns the
element as a value, so you can branch on whether a child route is matched.
## Not run: # In a layout route: render the matched child, or a fallback if on the # parent route itself. useOutlet( render = JS("o => o || <p>Pick a section from the menu.</p>") ) # Inject the matched outlet element as the body of a wrapping <section>. useOutlet(into = shiny::tags$section(class = "page")) ## End(Not run)## Not run: # In a layout route: render the matched child, or a fallback if on the # parent route itself. useOutlet( render = JS("o => o || <p>Pick a section from the menu.</p>") ) # Inject the matched outlet element as the body of a wrapping <section>. useOutlet(into = shiny::tags$section(class = "page")) ## End(Not run)
https://api.reactrouter.com/v7/functions/react-router.useOutletContext.html
useOutletContext( into = NULL, as = "children", selector = NULL, render = NULL, ... )useOutletContext( into = NULL, as = "children", selector = NULL, render = NULL, ... )
into |
A component (HTML tag or shiny.react-based element) that will receive the hook data as the specified prop. |
as |
Character. The name of the component's prop to inject the hook
data into (by default |
selector |
Character. Optional key to extract from the hook data object.
If |
render |
Optional |
... |
Additional props to pass to the component. |
Calls the useOutletContext() hook and injects the context value
(or a selector from it) as a prop of the into
component. The context is whatever was passed to the parent route's
Outlet(context = ...) call.
https://api.reactrouter.com/v7/functions/react-router.useParams.html
useParams(into = NULL, as = "children", selector = NULL, render = NULL, ...)useParams(into = NULL, as = "children", selector = NULL, render = NULL, ...)
into |
A component (HTML tag or shiny.react-based element) that will receive the hook data as the specified prop. |
as |
Character. The name of the component's prop to inject the hook
data into (by default |
selector |
Character. Optional key to extract from the hook data object.
If |
render |
Optional |
... |
Additional props to pass to the component. |
Calls the useParams() hook and injects the result (or a
selector from it) as a prop of the into component.
Returns the dynamic parameters from the current URL matched by the
Route path pattern.
https://api.reactrouter.com/v7/functions/react-router.useResolvedPath.html
useResolvedPath( into = NULL, as = "children", selector = NULL, render = NULL, to, ... )useResolvedPath( into = NULL, as = "children", selector = NULL, render = NULL, to, ... )
into |
A component (HTML tag or shiny.react-based element) that will receive the hook data as the specified prop. |
as |
Character. The name of the component's prop to inject the hook
data into (by default |
selector |
Character. Optional key to extract from the hook data object.
If |
render |
Optional |
to |
Character. The path to resolve. |
... |
Additional props to pass to the component. |
Calls the useResolvedPath() hook and injects the result (or a
selector from it) as a prop of the into component.
Returns pathname, search, and hash.
https://api.reactrouter.com/v7/functions/react-router.useRevalidator.html
useRevalidator( into = NULL, as = "children", selector = "state", render = NULL, ... )useRevalidator( into = NULL, as = "children", selector = "state", render = NULL, ... )
into |
A component (HTML tag or shiny.react-based element) that will receive the hook data as the specified prop. |
as |
Character. The name of the component's prop to inject the hook
data into (by default |
selector |
Character. Optional key to extract from the hook data object.
If |
render |
Optional |
... |
Additional props to pass to the component. |
Calls the useRevalidator() hook and injects the result (or a
selector from it) as a prop of the into component.
Returns the revalidation state ("idle" or "loading").
Useful for showing loading feedback during manual or polling revalidation.
https://api.reactrouter.com/v7/functions/react-router.useRouteError.html
useRouteError( into = NULL, as = "children", selector = NULL, render = NULL, ... )useRouteError( into = NULL, as = "children", selector = NULL, render = NULL, ... )
into |
A component (HTML tag or shiny.react-based element) that will receive the hook data as the specified prop. |
as |
Character. The name of the component's prop to inject the hook
data into (by default |
selector |
Character. Optional key to extract from the hook data object.
If |
render |
Optional |
... |
Additional props to pass to the component. |
Calls the useRouteError() hook and injects the result (or a
selector from it) as a prop of the into component.
Use inside the errorElement of a Route.
https://api.reactrouter.com/v7/functions/react-router.useRouteLoaderData.html
useRouteLoaderData( into = NULL, as = "children", selector = NULL, render = NULL, routeId, ... )useRouteLoaderData( into = NULL, as = "children", selector = NULL, render = NULL, routeId, ... )
into |
A component (HTML tag or shiny.react-based element) that will receive the hook data as the specified prop. |
as |
Character. The name of the component's prop to inject the hook
data into (by default |
selector |
Character. Optional key to extract from the hook data object.
If |
render |
Optional |
routeId |
Character. The route ID to fetch loader data from. |
... |
Additional props to pass to the component. |
Calls the useRouteLoaderData() hook and injects the result (or a
selector from it) as a prop of the into component.
Accesses loader data from any route by its routeId.
Only works inside a data router.
https://api.reactrouter.com/v7/functions/react-router.useRoutes.html
useRoutes(..., routes = NULL)useRoutes(..., routes = NULL)
... |
|
routes |
Optional. A |
Builds a route tree from Route children (or a plain object
routes array) and renders the matched route. The hook-based
equivalent of Routes / createRoutesFromElements for
code that prefers a configuration-as-data style. Must be called inside a
router (RouterProvider, HashRouter, etc.).
https://api.reactrouter.com/v7/functions/react-router.useSearchParams.html
useSearchParams(into = NULL, as = "children", param = NULL, render = NULL, ...)useSearchParams(into = NULL, as = "children", param = NULL, render = NULL, ...)
into |
A component (HTML tag or shiny.react-based element) that will receive the hook data as the specified prop. |
as |
Character. The name of the component's prop to inject the hook
data into (by default |
param |
Character. Name of a single query parameter to extract.
Returns a character vector of all values for that key (length 0 if
absent, length 1+ otherwise). When Empty vs. missing. A missing key produces a length-0 vector,
which renders as an empty string when injected with the default
|
render |
Optional |
... |
Additional props to pass to the component. |
Calls the useSearchParams() hook and injects the result
as a prop of the into component. Use the param
argument to extract a query parameter by name.
Values are always returned as character vectors so that repeated keys
(e.g. "?tag=a&tag=b") are preserved. When injected as
"children", vectors are joined with ", "; for custom
formatting, use render.
Reading vs. writing. The upstream JS hook returns a tuple
[searchParams, setSearchParams]. This wrapper splits the two paths:
into / as — read-only. Receives the parsed
params (or one param) and ignores the setter.
render — receives both as (params, setSearchParams),
so use this form when you need to update the URL programmatically:
useSearchParams(render = JS(
"(p, set) => <button onClick={() => set({tag:'b'})}>Filter</button>"
))
https://api.reactrouter.com/v7/functions/react-router.useSubmit.html
useSubmit(into = NULL, as = "children", render = NULL, ...)useSubmit(into = NULL, as = "children", render = NULL, ...)
into |
A component (HTML tag or shiny.react-based element) that will receive the hook value as the specified prop. |
as |
Character. The name of the component's prop to inject the hook
value into. Defaults to |
render |
Optional |
... |
Additional props to pass to the component. |
Calls the useSubmit() hook and passes the submit function to
render (or injects it as a prop of into).
The submit function has signature submit(target, options?) and
triggers a form submission (including calling the route's action)
without requiring a Form element.
Only works inside a data router.
Because the hook returns a function (not a value), the into form
is rarely useful here – prefer render = JS(...) so you can call
the submit function from inside the rendered element.
## Not run: useSubmit(render = JS( "submit => <button onClick={() => submit({ intent: 'delete' }, { method: 'post' }) }>Delete</button>" )) ## End(Not run)## Not run: useSubmit(render = JS( "submit => <button onClick={() => submit({ intent: 'delete' }, { method: 'post' }) }>Delete</button>" )) ## End(Not run)
https://api.reactrouter.com/v7/functions/react-router.useViewTransitionState.html
useViewTransitionState( into = NULL, as = "children", render = NULL, to, relative = NULL, ... )useViewTransitionState( into = NULL, as = "children", render = NULL, to, relative = NULL, ... )
into |
A component (HTML tag or shiny.react-based element) that will receive the hook value as the specified prop. |
as |
Character. The name of the component's prop to inject the hook
value into. Defaults to |
render |
Optional |
to |
Character. The destination path being transitioned to. |
relative |
Optional character. Either |
... |
Additional props to pass to the component. |
Calls the useViewTransitionState() hook and injects the boolean
result as a prop of the into component. Returns TRUE
while a View Transitions API navigation toward to is in progress.
Pair with the viewTransition prop on Link/NavLink
to drive transition-aware styling.