Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Double language in url after changing language and click on a link for a redirect #184

Open
yertech opened this issue May 10, 2024 · 2 comments

Comments

@yertech
Copy link

yertech commented May 10, 2024

Hello,

I just started a project, followed some tutorials to install gatsby-plugin-react-i18next. But I have an issue and I don't know if I can resolve that.

Scenario :
This is a sample project : GatsbyErrorI18n

  • Default language is EN

  • I have a link on the home page and when I click it I m redirected to the /localhost:8000/destinations/test.
    Where "test" is a slug :
    image

  • Now I come back to the homepage

  • I change the language to "FR"

  • The path is now /localhost:8000/fr, all good

  • I click on the link (url on the link : http://localhost:8000/fr/destinations/test/), and I have /localhost:8000/fr/fr/destinations/test => so double fr

Index page:

import { graphql } from "gatsby";
import { Link, useTranslation } from "gatsby-plugin-react-i18next";
import * as React from "react";
import LanguageSwitcher from "../components/languageSwitcher";

const IndexPage = () => {
  const { t } = useTranslation();
  return (
    <section className="relative table w-full pt-16 md:pt-44 pb-56" id="home">
      <div className="container relative">
        <LanguageSwitcher />
        <div className="grid grid-cols-1 items-center my-8 gap-[30px]">
          <div>
            <h4 className="font-bold lg:leading-normal leading-normal text-4xl lg:text-6xl mb-6 mt-5">{t("title")}</h4>
          </div>
          <Link
            to={"/destinations/test"}
            className="text-lg font-medium text-black hover:text-red-500 duration-500 ease-in-out rounded-md border border-gray-300 w-40"
            placeholder={""}
          >
            {"Click here"}
          </Link>
        </div>
      </div>
    </section>
  );
};

export default IndexPage;

export const query = graphql`
  query ($language: String!) {
    locales: allLocale(filter: { ns: { in: ["common", "index"] }, language: { eq: $language } }) {
      edges {
        node {
          ns
          data
          language
        }
      }
    }
  }
`;

Plugin config :

{
      resolve: "gatsby-plugin-react-i18next",
      options: {
        languages,
        defaultLanguage,
        siteUrl: "https://www.yoursite.com/",
        i18nextOptions: {
          fallbackLng: defaultLanguage,
          supportedLngs: languages,
          defaultNS: "common",
          interpolation: {
            escapeValue: false, // not needed for react as it escapes by default
          },
        },
      },
    },
@yertech
Copy link
Author

yertech commented May 10, 2024

#172 => PR : #173

@yertech
Copy link
Author

yertech commented May 10, 2024

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant