diff --git a/.changeset/giant-ligers-mix.md b/.changeset/giant-ligers-mix.md new file mode 100644 index 0000000000..c53d73ba5e --- /dev/null +++ b/.changeset/giant-ligers-mix.md @@ -0,0 +1,5 @@ +--- +"react-router": minor +--- + +Add `nonce` prop to `Links` & `PrefetchPageLinks` diff --git a/packages/react-router/lib/dom/ssr/components.tsx b/packages/react-router/lib/dom/ssr/components.tsx index 543b8c9ad2..78980363fd 100644 --- a/packages/react-router/lib/dom/ssr/components.tsx +++ b/packages/react-router/lib/dom/ssr/components.tsx @@ -214,6 +214,20 @@ function getActiveMatches( export const CRITICAL_CSS_DATA_ATTRIBUTE = "data-react-router-critical-css"; +/** + * Props for the {@link Links} component. + * + * @category Types + */ +export interface LinksProps { + /** + * A [`nonce`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce) + * attribute to render on the [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) + * element + */ + nonce?: string | undefined; +} + /** * Renders all the [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) * tags created by the route module's [`links`](../../start/framework/route-module#links) @@ -237,10 +251,12 @@ export const CRITICAL_CSS_DATA_ATTRIBUTE = "data-react-router-critical-css"; * @public * @category Components * @mode framework + * @param props Props + * @param {LinksProps.nonce} props.nonce n/a * @returns A collection of React elements for [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) * tags */ -export function Links(): React.JSX.Element { +export function Links({ nonce }: LinksProps): React.JSX.Element { let { isSpaMode, manifest, routeModules, criticalCss } = useFrameworkContext(); let { errors, matches: routerMatches } = useDataRouterStateContext(); @@ -265,13 +281,14 @@ export function Links(): React.JSX.Element { {...{ [CRITICAL_CSS_DATA_ATTRIBUTE]: "" }} rel="stylesheet" href={criticalCss.href} + nonce={nonce} /> ) : null} {keyedLinks.map(({ key, link }) => isPageLinkDescriptor(link) ? ( - + ) : ( - + ), )} @@ -463,7 +480,7 @@ function PrefetchPageLinksImpl({ {keyedPrefetchLinks.map(({ key, link }) => ( // these don't spread `linkProps` because they are full link descriptors // already with their own props - + ))} ); diff --git a/packages/react-router/lib/router/links.ts b/packages/react-router/lib/router/links.ts index 96ce8ea64a..dd99115c44 100644 --- a/packages/react-router/lib/router/links.ts +++ b/packages/react-router/lib/router/links.ts @@ -183,6 +183,12 @@ export interface PageLinkDescriptor | "color" | "title" > { + /** + * A [`nonce`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce) + * attribute to render on the [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) + * element + */ + nonce?: string | undefined; /** * The absolute path of the page to prefetch, e.g. `/absolute/path`. */