URL path does not update when switching the language
samvdst opened this issue · 2 comments
samvdst commented
Steps to reproduce:
- Example repo: https://github.com/samvdst/next-translate-routes-test
- Navigate to: http://localhost:3000/de/hilfsorganisationen
- Switch to EN
- URL is "http://localhost:3000/hilfsorganisationen" instead of "http://localhost:3000/charities"
- After page refresh, the URL changes to http://localhost:3000/charities
ozcancelik commented
You have to send props (your page name) to to your header.
In your example:
1- Change your LanguageSwicther component as :
import { Link } from "next-translate-routes";
import { useRouter } from "next/router";
import React from "react";
function LanguageSwitcher(props) {
const router = useRouter();
const LANGS = ["en", "de"];
return (
<div>
{LANGS.map((lang) => (
<Link
key={lang}
href={{
pathname: locale === "en" ? props.enPath : props.dePath,
}}
>
<a>{lang}</a>
</Link>
))}
</div>
);
}
export default LanguageSwitcher;
2- Use any page with props. Example your causes.js
<LanguageSwitcher enPath="causes" dePath="spendenprojekte" />
I hope it helps.
cvolant commented
@samvdst You can also change only one line in your code to make it work:
function LanguageSwitcher() {
const { pathname, query } = useRouter();
const LANGS = ["en", "de"];
return (
<div>
{LANGS.map((lang) => (
<Link key={lang} href={{ pathname, query }} locale={lang}> // Here
<a>{lang}</a>
</Link>
))}
</div>
);
}