Skip to content

fix(mui): prevent nested anchors in ThemedTitle#7422

Open
07ReuelBodhak wants to merge 1 commit into
refinedev:mainfrom
07ReuelBodhak:fix/mui-themed-title-nested-anchor
Open

fix(mui): prevent nested anchors in ThemedTitle#7422
07ReuelBodhak wants to merge 1 commit into
refinedev:mainfrom
07ReuelBodhak:fix/mui-themed-title-nested-anchor

Conversation

@07ReuelBodhak
Copy link
Copy Markdown

@07ReuelBodhak 07ReuelBodhak commented May 16, 2026

PR Checklist

Please check if your PR fulfills the following requirements:

Bugs / Features

What is the current behavior?

ThemedTitle in @refinedev/mui renders Refine's Link as the outer navigation element and MUI's Link as the inner element.

Since both render as <a> tags by default, the output becomes invalid nested anchor HTML:

<a href="/">
  <a>...</a>
</a>

This causes a React 19 hydration error in Next.js:

<a> cannot be a descendant of <a>
Hydration failed because the server rendered HTML didn't match the client.

What is the new behavior?

The inner MuiLink now renders as a div by using component="div".

This keeps the outer Refine Link responsible for navigation while preventing nested <a> tags.

The resulting HTML is now valid:

<a href="/">
  <div>...</div>
</a>

I verified this with a Next.js 16 + React 19 reproduction app:

  • Before the fix: browser console showed the nested <a> error: <a> cannot be a descendant of <a>.
  • After the fix: the nested <a> warning no longer appears.
  • The title/logo still renders correctly.

Fixes #7418

Notes for reviewers

No docs were added because this is a small internal rendering fix.

No test was added because I could not find an existing targeted test setup for this component. The change was manually verified using the reproduction steps from the linked issue.

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 16, 2026

⚠️ No Changeset found

Latest commit: afde701

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG] ThemedTitle renders nested <a> tags causing React 19 hydration error

1 participant