Comments (15)
@osk you can use changeLocale("") as workaround.
from gatsby-plugin-intl.
I also publish a updated package: https://www.npmjs.com/package/gatsby-plugin-react-intl
from gatsby-plugin-intl.
@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: #118
from gatsby-plugin-intl.
Is there any example for this?
from gatsby-plugin-intl.
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>
from gatsby-plugin-intl.
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
from gatsby-plugin-intl.
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
from gatsby-plugin-intl.
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: [],
},
},
from gatsby-plugin-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?
from gatsby-plugin-intl.
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.
from gatsby-plugin-intl.
@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.
from gatsby-plugin-intl.
@matissev Do you have an example repo?
from gatsby-plugin-intl.
@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.
from gatsby-plugin-intl.
@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.
from gatsby-plugin-intl.
@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!
from gatsby-plugin-intl.
Related Issues (20)
- Updated json needs clear cache in order to show changes on the page HOT 2
- Sitemap problems HOT 4
- redirect option creates problems with routers HOT 1
- Getting Error: Cannot find react-intl/locale-data/hk in Safari HOT 1
- Updating locales requires cleaning .cache HOT 2
- Distinguish between default display/redirect language and default messages language
- Is this project abandoned? HOT 8
- Fork and link this repo? HOT 1
- Styling a specific language HOT 1
- gatsby-plugin-intl is not compatible with your gatsby version 3 HOT 2
- How to use with Storybook? HOT 3
- Problem when using gatsby-plugin-transition-link and gatsby-plugin-intl. HOT 1
- Best practice for translate keywords ( react helmet ) & alt image description HOT 1
- ngeLoc
- Load component inside `wrapPageElement` fails HOT 1
- Is this plugin going to be updated to supported gatsby version 4.x.x? HOT 7
- Dynamic translation keys from json are not extracted
- How do I use this together with slices? HOT 1
- Wrong import of @formatjs locale-data
- All locale data included in bundle
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gatsby-plugin-intl.