Skip to content

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

Open
@yertech

Description

@yertech

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
          },
        },
      },
    },

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions