search

wiziple / gatsby-plugin-intl

Gatsby plugin that turns your website into an internationalization-framework out of the box.
http://gatsby-starter-default-intl.netlify.com
325 stars 178 forks source link

Whenever I switch locale, I'm shown index.js #44

Closed cclaq closed 5 years ago

cclaq commented 5 years ago

Description

Hello, I have used the plug in properly I believe (similar to the example given) however when I switch language I get redirected to the main page. For example if I am at localhost:8000/en/page-2 and I switch language to fr I got redirected to localhost:8000/fr/ instead of localhost:8000/fr/page-2

These are the most important files

//gatsby-config.js
module.exports = {
  siteMetadata: {
    title: `CcLàQ`,
    description: `Page officiel de la Chambre de commerce Latinoamèriquenne à Québec`,
    author: `@davidneios`,
    siteUrl: `https://cclaq.netlify.com/`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/cclaq_logo.png`, // This path is relative to the root of the site.
      },
    },
    `gatsby-plugin-offline`,
    {
      resolve: `gatsby-plugin-intl`,
      options: {
        path: `${__dirname}/src/intl`,
        languages: [`en`, `es`, `fr`],
        defaultLanguage: `fr`,
        redirect: true,
      },
    },
    `gatsby-plugin-sitemap`,
    `gatsby-plugin-robots-txt`,
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}
// src/components/languageSwitcher.js
import React from "react"
import { Helmet } from "react-helmet"
import Dropdown from "react-bootstrap/Dropdown"

const languageNames = {
  en: "English",
  fr: "Francais",
  es: "Espanol",
}
const LanguageSwitcher = () => (
  <IntlContextConsumer>
    {({ languages, language: currentLocale }) => (
      <>
        <Helmet>
          <html lang={currentLocale} />
        </Helmet>
        <Dropdown>
          <Dropdown.Toggle variant="dark" id="dropdown-basic">
            langue
          </Dropdown.Toggle>
          <Dropdown.Menu>
            {languages.map(lng => (
              <Dropdown.Item
                key={lng}
                onSelect={() => {
                  changeLocale(lng)
                }}
                as="button"
              >
                {languageNames[lng]}
              </Dropdown.Item>
            ))}
          </Dropdown.Menu>
        </Dropdown>
      </>
    )}
  </IntlContextConsumer>
)

export default injectIntl(LanguageSwitcher)

CSS

For the css I am using Bootstrap

Live

You can see the project live here

I hope you can help, thanks!

angrypie commented 5 years ago

It's a bug in 0.2.6 version with trailing slash in url. You need to roll back to 0.2.5 or wait until fix for current version will be introduced :)

cclaq commented 5 years ago

Thanks ! it was indeed the trailing slash in my link I had <Link to="/international">...</Link> once I switched to <Link to="/international/">...</Link> it worked.