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`.
*/