Support setting <html> lang attribute from a leaf route #12195

k0michi · 2024-10-28T02:31:37Z

k0michi
Oct 28, 2024

I'm currently migrating my website to react-router v7 from react-helmet and I stumbled across this problem.

Situation

As of [email protected], attributes of <html> cannot be changed from a leaf route, making it difficult to set appropriate lang attribute in multilingual websites while reusing the same layout. This applies to <body> attributes as well, meaning <body className> cannot be modified once it is set in root.tsx.

Workaround

As a simple workaround, I could use useMatches to reflect the property set in a leaf route's handle.

app/route.tsx:

type Handle = () => { lang: string };

export default function App() {
  const matches = useMatches();
  const lang = matches.map(m => (m.handle as (Handle | undefined))?.()?.lang).reduceRight((previous, current) => current ?? previous);

  return (
    <html lang={lang ?? "en"}>
      ...
    </html>
  );
}

Suggestion

One of possible API change I came up with is something like this:

Introduce <HTML> and <Body> components, just like <Meta> and <Links>
- (Maybe <Head> as well, for the sake of completeness)
Set attributes via meta function's tagName
- Or, add dedicated functions for them, like html and body

app/route.tsx:

export default function App() {
  return (
    <HTML lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <Body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
      </Body>
    </HTML>
  );
}

app/routes/leaf.tsx:

export const meta: MetaFunction = () => {
  return [
    { title: "日本語のページ" },
    { tagName: "html", lang: "ja" },
    { tagName: "body", className: "body-class" },
  ];
};

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support setting <html> lang attribute from a leaf route #12195

{{title}}

Replies: 0 comments

Select a reply

Support setting <html> lang attribute from a leaf route #12195

k0michi Oct 28, 2024

Situation

Workaround

Suggestion

Replies: 0 comments

k0michi
Oct 28, 2024