Skip to content

fix(react-router): prevent JSON-LD duplication and hydration mismatch in React 19 #14806

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Ammar123890 wants to merge 3 commits into
base: main
Choose a base branch
from
+12 −3
Open

fix(react-router): prevent JSON-LD duplication and hydration mismatch in React 19 #14806

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d678cff
fix(hydration): key change
Ammar123890 Feb 16, 2026
c656bf9
fix(hydration): format
Ammar123890 Feb 16, 2026
039f67b
fix(hydration): sign and changeset
Ammar123890 Feb 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/tame-bananas-work.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"react-router": minor
---

fix: prevent JSON-LD duplication and hydration mismatch in React 19 by using stable index-based keys and adding suppressHydrationWarning.
1 change: 1 addition & 0 deletions contributors.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -474,3 +474,4 @@
- zeromask1337
- zheng-chuang
- zxTomw
- Ammar123890
9 changes: 6 additions & 3 deletions packages/react-router/lib/dom/ssr/components.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -621,7 +621,7 @@ export function Meta(): React.JSX.Element {

return (
<>
{meta.flat().map((metaProps) => {
{meta.flat().map((metaProps, index) => {
if (!metaProps) {
return null;
}
Expand Down Expand Up @@ -656,18 +656,21 @@ export function Meta(): React.JSX.Element {
if ("script:ld+json" in metaProps) {
try {
let json = JSON.stringify(metaProps["script:ld+json"]);
let ldJsonKey = `script:ld+json:${index}`;

return (
<script
key={`script:ld+json:${json}`}
key={ldJsonKey}
type="application/ld+json"
suppressHydrationWarning
dangerouslySetInnerHTML={{ __html: escapeHtml(json) }}
/>
);
} catch (err) {
return null;
}
}
return <meta key={JSON.stringify(metaProps)} {...metaProps} />;
return <meta key={index} {...metaProps} />;
})}
</>
);
Expand Down