Naming routes depending on selected locale

[saschakrueger]

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]

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

[saschakrueger]

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]

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]

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

[galaczi]

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?

[jarda-svoboda]

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]

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

[galaczi]

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];
    }
}