multi language app, in the route

[leognmotta]

I looking forward how to achieve internationalization on the router like:

/renders-app
/pt/renders-app

basically optionally adding a prefix on the path, how could I get this done using file based router?

[TacticsJan]

Also am interested in knowing how this can be achieved with Tanstack Router

[stevenlyd]

I guess you can use route masking?
https://tanstack.com/router/latest/docs/framework/react/guide/route-masking

[shlroland]

plugins: [
  TanStackRouterVite({ target: 'react', autoCodeSplitting: true }),
  svgr(),
  react(),
  tailwindcss(),
  paraglideVitePlugin({
    project: './project.inlang',
    outdir: './src/paraglide',
    cookieName: 'lang',
    localStorageKey: 'lang',
    strategy: ['url', 'cookie', 'preferredLanguage', 'baseLocale'],
  }),
],

  
// Set up a Router instance
const router = createRouter({
  routeTree,
  context: {
    queryClient,
  },
  defaultPreload: 'intent',
  // Since we're using React Query, we don't want loader calls to ever be stale
  // This will ensure that the loader is always called when the route is preloaded or visited
  scrollRestoration: true,
  defaultPendingMinMs: 0,
  basepath: getRouterBasepath(window.location.pathname),
})



export function extractLocale(url: string): Locale | undefined {
  const urlObj = new URL(url, 'http://dummy.com');
  const pathSegments = urlObj.pathname.split('/').filter(Boolean);
  if (pathSegments.length > 0) {
    const potentialLocale = pathSegments[0];
    if (isLocale(potentialLocale)) {
      return potentialLocale;
    }
  }
}


export function getRouterBasepath(pathname?: string): string | undefined {
  let locale = extractLocale(pathname ?? '/');

  return (strategy.includes('url') && locale) ? `/${locale}` : undefined;
}


}

I want to know how you switch languages.

[EliasGit117]

@shlroland setLocale(locale)

[shlroland]

@shlroland setLocale(locale)

My meaning is, after switching languages, will the basePath change, and how should the routing respond to this change?I didn't use paraglidejs, it was another intl library. I'm surprised that tanstack router doesn't provide best practices in this regard

[EliasGit117]

@shlroland it will change if you have strategy “ur” in config of paraglide, or if you overwrite setLocale (check paraglide docs)

[rxliuli]

I am using i18next and cannot find any available community templates. The main requirement is to support language prefixes like /en /ja and generate SSG static websites.

[EliasGit117]

@samuelstroschein because it returns base locale if url is empty, I'm trying to implement that in case I don't have locale in url it should use value from cookies

overwriteGetLocale(() => {
  const fromUrl =  extractLocale(window.location.pathname);

  if (!!fromUrl)
    return fromUrl;

  const fromCookies = extractLocaleFromCookie();
  if (isLocale(fromCookies))
    return fromCookies;

  return baseLocale;
})

strategy: ['cookie', 'url', 'preferredLanguage', 'baseLocale'],

[58bits]

We'll be using optional parameters for this. There's a very good description of how to do this in the docs....

https://tanstack.com/router/v1/docs/framework/react/guide/path-params#internationalization-i18n-with-optional-path-parameters

[murbanowicz]

Any idea how to handle translated paths? Optional params can address lot, but having multiple languages pointing eg /pricing.tsx is so far impossible for me. In theory paraglide exposes some middleware for this but it doesn't work