Open osk opened 5 years ago
@osk you can use changeLocale("") as workaround.
Is there any example for this?
I'm handle onClick set locale
const handleChangeLocale = language => {
if(language === 'en') {
changeLocale("")
} else {
changeLocale(language)
}
}
<IntlContextConsumer>
{({ languages, language: currentLocale }) => {
return (
languages.map(language => (
<MenuItem
key={language}
onClick={() => handleChangeLocale(language)}
selected={ currentLocale === language }
>
{currentLocale}
{intl.formatMessage({ id: LANGUAGE[language].name })}
</MenuItem>
))
)}
}
</IntlContextConsumer>
This is mine below. How do I adapt yours :( @hoangbaovu ?
import React from "react"
import { Button } from "antd"
import { IntlContextConsumer, changeLocale } from "gatsby-plugin-intl"
const languageName = {
en: "English",
ar: "العربية",
}
const Language = props => {
return (
<div style={{ marginTop: `60px` }}>
<strong style={{ marginRight: `30px` }}>{props.chooselanguage}</strong>
<IntlContextConsumer>
{({ languages, language: currentLocale }) =>
languages.map(language => (
<Button
type="link"
key={language}
onClick={() => changeLocale(language === "en" ? "/" : language)}
style={{
color: currentLocale === language ? `purple` : `gray`,
cursor: `pointer`,
height: `40px`,
padding: `0px 10px`,
marginRight: `10px`,
}}
>
{languageName[language]}
</Button>
))
}
</IntlContextConsumer>
</div>
)
}
export default Language
Just got this working with the following tweaks
import React from "react"
import { Button } from "antd"
import { IntlContextConsumer, changeLocale } from "gatsby-plugin-intl"
const languageName = {
en: "English",
ar: "العربية",
}
// added this block here
const handleChangeLocale = (language) => {
if (language === "en") {
changeLocale("");
} else {
changeLocale(language);
}
};
const Language = props => {
return (
<div style={{ marginTop: `60px` }}>
<strong style={{ marginRight: `30px` }}>{props.chooselanguage}</strong>
<IntlContextConsumer>
{({ languages, language: currentLocale }) =>
languages.map(language => (
<Button
type="link"
key={language}
onClick={() => handleChangeLocale(language)} // edited this line
style={{
color: currentLocale === language ? `purple` : `gray`,
cursor: `pointer`,
height: `40px`,
padding: `0px 10px`,
marginRight: `10px`,
}}
>
{languageName[language]}
</Button>
))
}
</IntlContextConsumer>
</div>
)
}
export default Language
same needs, I just made a pr for adding ignoredPaths
and redirectDefaultLanguageToRoot
as an option for intl. Here is explain:
{
resolve: `gatsby-plugin-intl`,
options: {
// option for use / as defaultLangauge root path. if your defaultLanguage is `ko`, when `redirectDefaultLanguageToRoot` is true, then it will not generate `/ko/xxx` pages, instead of `/xxx`
redirectDefaultLanguageToRoot: false,
// paths that you don't want to genereate locale pages, example: ["/dashboard/","/test/**"], string format is from micromatch https://github.com/micromatch/micromatch
ignoredPaths: [],
},
},
I also publish a updated package: https://www.npmjs.com/package/gatsby-plugin-react-intl
I've set the settings redirectDefaultLanguageToRoot: true, but it didn't work. Any idea?
"gatsby-plugin-intl": "^0.3.3",
and also do I need to update the package 1.2.0 what is the difference?
I use "gatsby-plugin-intl": "^0.3.3",
as well and the setting redirectDefaultLanguageToRoot: true
changes nothing. The default language should be the "root". Because a redirect for the default language is also bad for SEO.
@vlknhslk @renepardon The redirectDefaultLanguageToRoot
was added by @theowenyoung on his fork, it's not part of the official version. You'll have to change to gatsby-plugin-react-intl
to make use of it.
Linking the PR here to avoid confusion: https://github.com/wiziple/gatsby-plugin-intl/pull/118
@theowenyoung It's weird, the redirection from "/en" to "/" on your fork doesn't seem to work here. I just get a blank page on all of the routes. Maybe I am missing something.
@matissev Do you have an example repo?
@theowenyoung I tried again today. The root path actually works with my default language, but the "/en" path (which is default) doesn't redirect to "/". But maybe this is the default behavior of the plugin? Or maybe it comes from my gatsby-node.js file.
@matissev Actually, if en
is your default language, the plugin will not generate pages with /en/*
path.
Why do you have the /en
path? I suspected if en
is your default language, then only /*
will be used.
@theowenyoung Ok I thought that the plugin would redirect "/en" to "/". I don't really need the "/en" path but I just thought that it could redirect for consistency. In any case, it is working as expected. Thanks for the fork btw!
When I have a
defaultLanguage
set, I'd like an option to have that redirects all pages for that language to the root, instead of/<lang>
. This applies mostly to<Link>
andchangeLocale()
E.g. I have
en
andis
andis
is the default language. If I callchangeLocale('is')
on/en/about
I'd like to go to/about
not/is/about
.