How to render alternate language links for each route? #8159

Blaumaus · 2023-11-28T10:50:14Z

Blaumaus
Nov 28, 2023

I implemented alternate href links in a root.jsx file like that:

const alternateLinks = _reduce(
    data?.allSites,
    (acc, {subdomain, countryCode}) => {
      if (!subdomain || !countryCode) {
        return acc;
      }

      const locale = clm.getLocaleByAlpha2(_toUpper(countryCode));
      const urlObject = new URL(subdomain);
      urlObject.pathname = pathname;

      return [
        ...acc,
        {
          rel: 'alternate',
          hrefLang: locale,
          href: urlObject.toString(),
        },
      ];
    },
    [],
  );

<head>
  <Links />
  {_map(alternateLinks, (link) => (
    <link key={link.hrefLang} {...link} />
  ))}
  {/* todo: x-default hreflang link */}
</head>

it renders the links like it's supposed to, but the problem is if I navigate to another page - the alt links will stay the same because root loader executes once.

How do I properly render them for all pages?
Am I supposed to do something like that in each route or is it possible to use some kind of hook or something similar?

sergiodxa · 2023-11-28T21:27:03Z

sergiodxa
Nov 28, 2023
Maintainer

You can use the MetaFunction to render links that depends on data or the url.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

How to render alternate language links for each route? #8159

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

How to render alternate language links for each route? #8159

Uh oh!

Blaumaus Nov 28, 2023

Replies: 1 comment

Uh oh!

sergiodxa Nov 28, 2023 Maintainer

Blaumaus
Nov 28, 2023

sergiodxa
Nov 28, 2023
Maintainer