redirectDocument security consideration
Applications should validate any user-supplied inputs to redirects when using redirectDocument, since it accepts absolute URLs and can navigate to external domains.
React Router · API · all subjects
utilities
76 notes in this subject, read out of this brain and free to use. This is page 2 of 2.
redirectDocument example with action
Example showing redirectDocument in a route action that destroys a session and redirects: import { redirectDocument } from "react-router"; import { destroySession } from "../sessions.server"; export async function action({ request }: Route.ActionArgs) { let session = await getSession(request.headers.get("Cookie")); return redirectDocument("/", { headers: { "Set-Cookie": await destroySession(session) } }); }
redirectDocument return type
redirectDocument returns a Response object with the redirect status and Location header.
redirectDocument utility function
redirectDocument is a utility that returns a redirect Response object which forces a document reload to a new location. It sets the status code and Location header, defaulting to 302 Found. It accepts absolute URLs and can navigate to external domains, so applications should validate any user-supplied inputs to redirects.
renderMatches matches parameter
The matches parameter of renderMatches is an array of route matches (RouteMatch[]) or null. It represents the array of route matches that should be rendered into React elements.
renderMatches function signature
renderMatches is a utility function that renders the result of matchRoutes into a React element. It accepts an array of RouteMatch objects or null, and returns a React ReactElement or null. The function signature is: function renderMatches(matches: RouteMatch[] | null): React.ReactElement | null
renderMatches return value
renderMatches returns a React element that renders the matched routes, or null if no matches are provided.
replace import
The replace utility is imported from the react-router package: import { replace } from "react-router";
replace function signature
replace takes two parameters: url (the URL to redirect to, required) and init (the status code or ResponseInit object, optional). It returns a Response object with the redirect status and Location header.
replace utility function
The replace utility creates a redirect Response that performs history.replaceState instead of history.pushState for client-side navigation redirects. It sets the status code and Location header, defaulting to 302 Found.
replace usage example
Example of using replace in a loader: import { replace } from "react-router"; export async function loader() { return replace("/new-location"); }
replace status code default
The replace utility defaults to a 302 Found HTTP status code when no status code is specified in the init parameter.
resolvePath return type
resolvePath returns a Path object containing the resolved pathname, search, and hash.
resolvePath fromPathname parameter
The fromPathname parameter specifies the pathname to resolve the path from. It defaults to "/" if not provided.
resolvePath to parameter
The to parameter is the path to resolve. It can be a string or a partial Path object.
resolvePath function signature
resolvePath is a function that takes a path to resolve (either a string or a partial Path object) and an optional fromPathname parameter (defaults to "/"), and returns a resolved Path object with pathname, search, and hash properties.