URL path does not update when switching the language

[samvdst]

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]

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]

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