ptz-i18n redirectToHome.js does not work?

[mattez]

My setup is prefixDefault: true and langKeyDefault: 'en' all node packages in last versions. When I use gatsby develop then on my index page http://localhost:8000/ is WSOD and in console is:

Page not found /
Page not found /
Page not found /

Only when I manually add lang code /en the index.en.js is loaded. Some how that redirect / routeing does not work.

It behaves differently when I build it gatsby build and than use gatsby serve. http://localhost:9000/ servers me English version without any redirect, so I have home on two URLs / and /en/

I must missing something... I still have no idea why it is not working in my case. Any help welcomed.

I tried to reinstall node modules. Check my config many times, try to find something in DEMO. I'm lost. Please help @angeloocana @hugomn .

[hugomn]

Hi Matej! Can you provide a repo with your issue? I’ll try to reproducer and fix it here.

[mattez]

Hi @hugomn . Thank you very much for your reaction. So I prepared private repo here https://github.com/mattez/e2web/ and set you as collaborator. Please look at branch "feature/i18n" (Origin repo is under company account on Bitbucket)

I greatly appreciate your help. Thank you in advice.

[mattez]

@hugomn did you find out something? I greatly appreciate your help.

[hugomn]

Sorry Matěj. I was on holidays and didn't have time to check it. Do you still have the issue?

[mattez]

Hi @hugomn . Yes issue is still there. And your help is still appreciated. Thanks a lot for your attention.

[hugomn]

Hey @mattez! I'm sorry for the delay, but I finally found the solution to your problem! 🎉

The thing here is that the redirectToHome doesn't work by itself. You need to create an index.js file that will redirect to your defaultLangKey page. Here is the code:

1. First add two new parameters in your siteMetadata:

gatsby-config.js

siteMetadata: {
  ...
  langs: ["en", "cs"],
  defaultLangKey: "en",
}

2. Create a new index.js file inside src/pages:

import React from "react"
import { graphql, navigate } from "gatsby"
import { getUserLangKey } from "ptz-i18n"
import { withPrefix } from "gatsby-link"

class RedirectIndex extends React.PureComponent {
  constructor(args) {
    super(args)
    // Skip build, Browsers only
    if (typeof window !== "undefined") {
      const { langs, defaultLangKey } = args.data.site.siteMetadata
      const langKey = getUserLangKey(langs, defaultLangKey)
      const homeUrl = withPrefix(`/${langKey}/`)
      navigate(homeUrl)
    }
  }
  render() {
    return <div />
  }
}

export default RedirectIndex

export const pageQuery = graphql`
  query IndexQuery {
    site {
      siteMetadata {
        defaultLangKey
        langs
      }
    }
  }
`

I tested here locally and it worked. Please let me know if it works for you. Cheers! 🍻

[hugomn]

Hi @mattez, has it worked for you? Can we close this issue?

[killua99]

can I have some help with something similar. In my case I don't want to redirect but to use the prefixDefault: false on my site.

this is what I've:

gatsby-config

  siteMetadata: {
    title: `Jonás Amez`,
    description: `Integrador multidisciplinario de ideas`,
    author: `Jonás Amez`,
    siteUrl: `http://localhost:9009`,
    langs: ["en", "es"],
    defaultLangKey: "es",
  },
...
 {
      resolve: `gatsby-plugin-i18n`,
      options: {
        langKeyDefault: 'es',
        langKeyForNull: 'any',
        prefixDefault: false,
        useLangKeyLayout: true,
      },
    },```

Then my index.js index.es.js and index.en.js

the english index seems to work, but the spanish index is calling the template/page.js instead.

what could I be missing here?

[hugomn]

Hi @killua99! Happy to help. Do you have an example repo or codesandbox where I could reproduce it?

[killua99]

@hugomn I'll upload a repo today.

But I kind discover that I could not have index.js index.es.js and index.en.js. When I was on the default language "es" without prefix I was using the templage/page.js.

I deleted the index.js and everything start to working just normal.

But I'll uploaded in the next hours. Thanks for the response 🙇‍♂️

[hugomn]

That’s true! When you want to disable predixDefault you need to redirect manually, like in the example above.

[stchristian]

This error is very annoying. I tried the same with reach-routers's Redirect component in order to redirect but it failed horribly. In addition it was also misleading to see that in this demo repo the stuff is working without Redirection component but in reality it does not. The plugin's default behaviour should handle this and redirect to the language specified by langKeyDefault in my opinion. Or at least is should be configurable to do so