Links component signature
The Links component has the signature: function Links({ nonce, crossOrigin }: LinksProps): React.JSX.Element. It accepts an object with optional nonce and crossOrigin properties and returns a React JSX Element.
React Router · API · all subjects
links
15 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Links component renders link tags from route module
The Links component renders all the <link> tags created by the route module's links export. It should be rendered inside the <head> element of the document.
Links nonce prop
The nonce prop is a nonce attribute to render on the <link> element. If not provided in Framework Mode, it will default to any <ServerRouter nonce> prop.
Links crossOrigin prop
The crossOrigin prop is a crossOrigin attribute to render on the <link> element.
Links component example usage
Example: import { Links } from "react-router"; export default function Root() { return ( <html> <head> <Links /> </head> <body></body> </html> ); }
PrefetchPageLinks component signature
PrefetchPageLinks is a component with signature: function PrefetchPageLinks({ page, ...linkProps }: PageLinkDescriptor). It accepts a page prop for the absolute path to prefetch and additional linkProps to spread onto link tags.
PrefetchPageLinks page prop
The page prop specifies the absolute path of the page to prefetch, for example '/absolute/path'.
PrefetchPageLinks linkProps parameter
The linkProps are additional props that spread onto the <link> tags rendered by PrefetchPageLinks. These can include standard HTMLLinkElement props such as crossOrigin, integrity, rel, and others.
PrefetchPageLinks purpose
PrefetchPageLinks renders <link rel=prefetch|modulepreload> tags for modules and data of another page to enable instant navigation to that page. It is used internally by <Link prefetch> but can be rendered to prefetch a page for any other reason.
PrefetchPageLinks example use case
PrefetchPageLinks can be used to prefetch search results as the user types into a search field, before they click through to their selection.
PrefetchPageLinks import
PrefetchPageLinks is imported from the 'react-router' package.
PrefetchPageLinks basic usage
Basic usage of PrefetchPageLinks: import { PrefetchPageLinks } from "react-router"; <PrefetchPageLinks page="/absolute/path" />
links export function
Route links define link elements to be rendered in the document head. It returns an array of link descriptors with properties like rel, href, type, and as. All route links are aggregated and rendered through the Links component.
Links component usage
The Links component from react-router renders all aggregated route links in the document head. It is usually rendered in the app root, typically inside the HTML head element.
links export example
Example showing links function that returns array of link descriptors including favicon, stylesheet, and preload link with properties like rel, href, type, and as.