Open yertech opened 6 months ago
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 :
/localhost:8000/destinations/test
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
/localhost:8000/fr/fr/destinations/test
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 }, }, }, },
https://github.com/microapps/gatsby-plugin-react-i18next/issues/172 => PR : https://github.com/microapps/gatsby-plugin-react-i18next/pull/173
Fixed in that fork : https://www.npmjs.com/package/@z1574242600/gatsby-plugin-react-i18next
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 :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 doublefr
Index page:
Plugin config :