fair-rose

i18n with optional locale param?

I see the example in here https://tanstack.com/router/latest/docs/framework/react/guide/path-params#type-safety-for-i18n And it uses optional locale param. Also, there is this example https://tanstack.com/router/latest/docs/framework/react/examples/basic-ssr-file-based that has the head in the __root route. I want to alter the head and also the <html lang={...}> of the RootComponent, based on the locale. But as I understand, locale is not defined yet in the root route? It gets defined only in it's childern, `root/__main/{-$locale}/...` ?

React TanStack Router Basic Ssr File Based Example | TanStack Route...

An example showing how to implement Basic Ssr File Based in React using TanStack Router.

Path Params | TanStack Router React Docs

Path params are used to match a single segment (the text until the next /) and provide its value back to you as a named variable. They are defined by using the $ character prefix in the path, followed...

2 Replies

fair-rose•3d ago

You can use useMatches hook for <html lang={...}>. For head, there should be matches object in its argument

async head({ matches }) {
  // ...
}

async head({ matches }) {
  // ...
}

You can reduce the matches to find the locale

const nullableLocale = matches.reduce((reduced, match) => reduced === null && 'locale' in match.params ? match.params.locale : null, null);

const nullableLocale = matches.reduce((reduced, match) => reduced === null && 'locale' in match.params ? match.params.locale : null, null);

fascinating-indigo•17h ago

in this case i would useParams({strict: false })

Gaming

Programming

i18n with optional locale param?

Did you find this page helpful?