locale not storing correctly or changing back
Closed this issue · 3 comments
So everything works, which I am very thankful for. Except there's 1 problem:
Whenever I change locale, it reverts to the previous locale when I navigate to another page.
When I change locale, reload the page and then navigate to another page, it does stay. But then when I change locale once more, it changes back to the last one I reloaded on.
I've been looking for hours for why this happens, but I can't seem to find it.
I've got everything the same as the example project.
I've gotten to the core of the problem:
It doesn't work because I'm loading my nav items through an {#each}
-loop.
I define my pages through my db, and add a {$locale}
in between the url. This doesn't render the locale in a reactive state (I guess), making it route to the first set locale at any point.
When I add the links in the html-part of the navbar, and thus not render them through an {#each}
-loop, it works fine.
Problem solved, but might be something to look at later.
TL;DR:
This doesn't work:
{#each navItems as page}
<li><a href="/{$locale}/{page.url}">{page.name}</a></li>
{/each}
This works (as expected):
<li><a href="/{$locale}/item-1">Item 1</a></li>
<li><a href="/{$locale}/item-2">Item 2</a></li>
<li><a href="/{$locale}/item-3">Item 3</a></li>
EDIT: I do want to add that this did work a few months back. Don't know which change triggered this to happen.
Hi @raremiroir, thanks for sharing this.
For me this sounds like a bug with Svelte
or your specific implementation. If $locale
changes in other parts of the application, then typesafe-i18n
works like intended.
Thanks for your quick reply.
I'll look into it further and see if any libs/files conflict. 😉