如何使用gatsby-theme-i18n-react-i18next根据所选语言修改URL的slug

以下是针对pages目录下静态页面的实现步骤，可直接复用调整：

1. 基础插件配置 #

先在gatsby-config.js中完成插件的基础参数配置，确保多语言前缀生成逻辑符合预期：

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-react-i18next`,
      options: {
        // 配置支持的语言列表
        languages: [`en`, `fr`],
        // 配置默认语言
        defaultLanguage: `en`,
        // 默认语言路径是否省略语言前缀，按需开启
        generateDefaultLanguagePage: false,
        i18nextOptions: {
          interpolation: {
            escapeValue: false
          }
        }
      }
    }
  ]
}

2. 覆写页面生成路径 #

在项目根目录的gatsby-node.js文件中，通过onCreatePage钩子修改默认页面路径，自定义不同语言对应的slug：

// 提前配置所有页面的多语言slug映射表，后续新增页面直接在此扩展即可
const pageSlugI18nMap = {
  // key对应pages目录下的页面文件名
  product: {
    en: 'product',
    fr: 'produit'
  }
}

exports.onCreatePage = ({ page, actions }) => {
  const { createPage, deletePage } = actions
  const pageName = page.componentPath.split('/').pop().replace('.js', '')

  // 仅处理我们配置了多语言slug的页面
  if (pageSlugI18nMap[pageName]) {
    // 删除默认生成的页面
    deletePage(page)
    const supportLangs = Object.keys(pageSlugI18nMap[pageName])

    // 遍历所有支持的语言，生成对应路径的页面
    supportLangs.forEach(lang => {
      const currentSlug = pageSlugI18nMap[pageName][lang]
      // 默认语言可省略前缀，不需要的话直接统一用`/${lang}/${currentSlug}/`格式即可
      const newPagePath = lang === page.context.i18n.defaultLanguage 
        ? `/${currentSlug}/` 
        : `/${lang}/${currentSlug}/`

      createPage({
        ...page,
        path: newPagePath,
        context: {
          ...page.context,
          language: lang,
          i18n: {
            ...page.context.i18n,
            language: lang,
            routed: true
          }
        }
      })
    })
  }
}

3. 内链跳转适配 #

页面内跳转链接需要根据当前语言动态生成对应路径，示例如下：

import { useI18next, Link } from 'gatsby-plugin-react-i18next'

const ProductNav = () => {
  const { language } = useI18next()
  // 也可以直接复用上面的pageSlugI18nMap映射表，避免重复定义
  const productSlug = language === 'fr' ? 'produit' : 'product'
  return <Link to={`/${productSlug}`}>产品页入口</Link>
}

注：如果是从CMS等数据源拉取的动态页面，直接在createPage钩子生成页面时，读取对应语言的slug字段拼接路径即可，逻辑和上面的静态页面处理一致。

内容的提问来源于stack exchange，提问作者Sdroy