Блог

У меня есть проект, который использует Gatsby, и для локализации я использовал плагин gatsby-plugin-react-i18next. Как я могу изменить слаг в URL-адресе в зависимости от выбранного языка. Например, у меня есть страница с именем product.js в папке «Страницы». На французском языке я хочу, чтобы страница была такой https://www.example.com/fr/produit вместо https://www.example.com/product.

У вас есть множество опций, доступных с помощью gatsby-plugin-react-i18next плагина. В вашем случае language используется выбранный в данный момент язык.

У вас есть (по крайней мере) два варианта:

• Использование компонента открытой ссылки из 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>
  };
   

  Плагин обертывает Link компонент из Гэтсби, добавляя пользовательскую опору ( language ), которую можно заполнить открытым состоянием useI18next hook.

• Использование встроенного Link (от Гэтсби) и использование литерала шаблона:

   const SpanishAboutLink = () => {
  
     const {language} = useI18next();
  
    <Link to=`{language}/about`>
       About page in the selected language
     </Link>
  };
   

  При таком подходе вы получаете текущий язык таким же образом, как и раньше, но объединяете его с Link компонентом для создания URL-адреса на основе этого параметра.

В вашем случае, поскольку вы меняете слизняк на обеих страницах (product и produit), вам нужно будет выполнить запрос как с помощью запроса страницы, так и с применением одного из предыдущих подходов динамически. Например:

 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
 

Из-за отсутствия подробностей в вашей реализации и ваших источниках данных я не могу угадать, как должен выглядеть ваш запрос. Но, предполагая, что у вас есть способ извлечения title и slug ваших доступных страниц, вы можете сделать что-то вроде приведенного выше фрагмента.