How to change the slug in the url based on the language selected using gatsby-theme-i18n-react-i18next? - localization

Question

I have a project that uses Gatsby and for localization, I have used gatsby-plugin-react-i18next plugin. How can I change the slug in the URL based on the language selected. For example, I have a page named product.js under the pages folder. In French language, I want the page as https://www.example.com/fr/produit instead of https://www.example.com/product.

Answer 1

You have a bunch of options available using the gatsby-plugin-react-i18next plugin. In your case, language holds the currently selected language.
You have (at least) two options:
Using the exposed Link component from gatsby-plugin-react-i18next:
import {Link} from 'gatsby-plugin-react-i18next';
const SpanishAboutLink = () => {
const {language} = useI18next();
<Link to="/about" language={language}>
About page in Spanish
</Link>
};
The plugin wraps the Link component from Gatsby adding a custom prop (language) that can be filled with the exposed state of useI18next hook.
Using the built-in Link (from Gatsby) and using a template literal:
const SpanishAboutLink = () => {
const {language} = useI18next();
<Link to=`{language}/about`>
About page in the selected language
</Link>
};
In this approach, you are getting the current language in the same way as before but you are concatenating it to a Link component to create a URL based on that parameter.
In your case, since you are changing the slug in both pages (product and produit), you'll need to query both using a page query and applying one of the previous approaches dynamically. For example:
import * as React from 'react'
import { graphql } from 'gatsby'
const HomePage = ({data}) => {
const {language} = useI18next();
return (
<div>
<Link to={`${language}/${data.allYourPagesQuery.edges.node[0].slug}`}>
{data.allYourPagesQuery.edges.node[0].title}
</Link>
</div>
)
}
export const query = graphql`
query HomePageQuery {
allYourPagesQuery{
edges {
node {
name
slug
}
}
}
}
`
export default HomePage
Due to the lack of details in your implementation and your data sources, I'm not able to guess how your query should look like. But assuming you have a way of retrieving the title and the slug of your available pages you can do something like the snippet above.