feat(react-router): add nonce prop to Links & PrefetchPageLinks components (#14048)

Author: MichaelDeBoey

.changeset/giant-ligers-mix.md

@@ -0,0 +1,5 @@
+---
+"react-router": minor
+---
+
+Add `nonce` prop to `Links` & `PrefetchPageLinks`

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 [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
+   * element
+   */
+  nonce?: string | undefined;
+}
+
 /**
  * Renders all the [`<link>`](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 [`<link>`](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) ? (
-          <PrefetchPageLinks key={key} {...link} />
+          <PrefetchPageLinks key={key} nonce={nonce} {...link} />
         ) : (
-          <link key={key} {...link} />
+          <link key={key} nonce={nonce} {...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
-        <link key={key} {...link} />
+        <link key={key} nonce={linkProps.nonce} {...link} />
       ))}
     </>
   );

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 [`<link>`](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`.
    */