hozana/next-translate-routes

URL path does not update when switching the language

samvdst opened this issue · 2 comments

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.

@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>
  );
}