sveltekit-i18n/lib

Naming routes depending on selected locale

Closed this issue · 8 comments

saschakrueger commented

Not sure if I missed this, but I cannot seem to get my head around the following issue:

Let's say I am using two languages [en, de]

E.g. I have a route /projects (so basically /en/projects) in the english version of my website. In german that route needs to be named /projekte which would be beneficial for SEO. It's basically the same route with the same +page.svelte and the same +layout
.svelte, but with a translated route-name

Maybe someone could give me some guidance here.

jarda-svoboda commented

Hi @saschakrueger!
There should be no problem inserting different paths to various config.loaders..

saschakrueger commented

I actually tried that, but when switching the language in the locale-router-advanced example, the route does not get set to the respective locale.

The language switch only changes the local, but not the route.

jarda-svoboda commented

You have to redirect your users to the right url by yourself. I would say the easiest way is to modify your hooks.server.js

saschakrueger commented

Ok, thank you very much. Will play around with that.

galaczi commented

So using the advanced route example, you would add matchers for the routes to match the english and the german route names? E.g. project or projekte. Then use those two route names in the routes property of the loaders for their respective languages?

  • 👍1
jarda-svoboda commented

Well, there are several ways to achieve this. One is to create respective files in routes directory, the second is (not tested) to modify your hooks.server.js to present desired content.

jarda-svoboda commented

Using SvelteKit's route matchers is the best solution, though..

galaczi commented

Sveltekit shipped reroute hook just a few days ago. Seems to be the exact solution.

https://kit.svelte.dev/docs/hooks#universal-hooks-reroute

/** @type {Record<string, string>} */
const translated = {
	'/en/about': '/en/about',
	'/de/ueber-uns': '/de/about',
	'/fr/a-propos': '/fr/about',
};

/** @type {import('@sveltejs/kit').Reroute} */
export function reroute({ url }) {
	if (url.pathname in translated) {
		return translated[url.pathname];
	}
}
  • 👍1