Reactjs 如何将i18n用于gatsby？_Reactjs_Gatsby_I18next

Reactjs 如何将i18n用于gatsby？

reactjs gatsby

Reactjs 如何将i18n用于gatsby？,reactjs,gatsby,i18next,Reactjs,Gatsby,I18next,我在盖茨比网站上的翻译有问题我正在使用i18n插件进行翻译，但如果我将index.jsxtwo-FormattedMessage标记放入，它会破坏我的index.jsx 我可以在谷歌上找到我的问题，但我不知道如何解决它 My index.jsx import React from 'react' import { FormattedMessage } from 'react-intl' import Layout from '../components/Layout' const Ind

我在盖茨比网站上的翻译有问题

我正在使用i18n插件进行翻译，但如果我将

index.jsx

two-FormattedMessage标记放入，它会破坏我的

index.jsx

我可以在谷歌上找到我的问题，但我不知道如何解决它

My index.jsx

import React from 'react'
import { FormattedMessage } from 'react-intl'

import Layout from '../components/Layout'


const IndexPage = ({ pathContext: { locale } }) => (
  <Layout locale={locale}>
    <FormattedMessage id="hello" />
    <FormattedMessage id="hello" />
  </Layout>
)

export default IndexPage

从“React”导入React
从“react intl”导入{FormattedMessage}
从“../components/Layout”导入布局
常量IndexPage=（{pathContext:{locale}}）=>(
)
导出默认索引扩展

和我的布局：

import React from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'
import { StaticQuery, graphql } from 'gatsby'

import Header from './header'
import './layout.css'

import { IntlProvider, addLocaleData } from 'react-intl'

// Locale data
import enData from 'react-intl/locale-data/en'
import ptData from 'react-intl/locale-data/pt'
import esData from 'react-intl/locale-data/es'

// Messages
import en from '../i18n/en.json'
import pt from '../i18n/pt.json'
import es from '../i18n/es.json'

const messages = { en, pt, es }

addLocaleData([...enData, ...ptData, ...esData])

const Layout = ({ locale, children }) => (
  <StaticQuery
    query={graphql`
      query SiteTitleQuery {
        site {
          siteMetadata {
            title
          }
        }
      }
    `}
    render={data => (
      <>
        <Helmet
          title={data.site.siteMetadata.title}
          meta={[
            { name: 'description', content: 'Sample' },
            { name: 'keywords', content: 'sample, something' },
          ]}
        >
          <html lang="en" />
        </Helmet>
        <Header lang="/^\/eng/" />
        <div
          style={{
            margin: '0 auto',
            maxWidth: 960,
            padding: '0px 1.0875rem 1.45rem',
            paddingTop: 0,
          }}
        >
          <IntlProvider locale={locale} messages={messages[locale]}>
            {children}
          </IntlProvider>
        </div>
      </>
    )}
  />
)

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

从“React”导入React
从“道具类型”导入道具类型
从“反应头盔”导入头盔
从“gatsby”导入{StaticQuery，graphql}
从“./头”导入头
导入“./layout.css”
从“react intl”导入{IntlProvider，addLocaleData}
//区域设置数据
从“react intl/locale data/en”导入EndData
从“react intl/locale data/pt”导入ptData
从“react intl/locale data/es”导入esData
//信息
从“../i18n/en.json”导入en
从“../i18n/pt.json”导入pt
从“../i18n/es.json”导入es
const messages={en，pt，es}
addLocaleData（[…enData，…ptData，…esData]）
常量布局=（{locale，children}）=>(
(
{儿童}
)}
/>
)
Layout.propTypes={
子项：PropTypes.node.isRequired，
}
导出默认布局

我希望您不能帮助我使用多个FormattedMessage标记进行翻译，谢谢。

也许对您来说不是一个有效的解决方案，但是。你试过了吗？我和盖茨比的第一个项目是一个关于语言的噩梦，直到我找到它。在我看来，它真的很好用。您必须使用npm/Thread安装它，并稍微进行配置。您可以删除包装器

IntlProvider

，并且可以在任何地方（页面/模板或组件）进行翻译

下面是从代码中提取的示例（英语和西班牙语）。插件负责URL，将

/es

和

/en

放在每个

页面/模板中：
src/pages/index.jsx
import React from 'react'; 
import { I18n } from 'react-i18next'; 
import { withI18next } from 'gatsby-plugin-i18next';
import Layout from '../components/index'

const IndexPage = props => (<I18n>{t => (
    <Layout{...props}>
        <p>{t('hello')}</p>
        <p>{t('hello')}</p>
    </Layout>
)}</I18n>);

export const query = graphql`
query($lng: String!){
    locales: allLocale(filter: { lng: { eq:$lng }, ns: { eq: "messages" } }) {
      ...TranslationFragment
    }
  }
`;

export default withI18next()(IndexPage);

locale/en/messages.json
{
  "hello": "Hi!",
  "metaDescription": "Sample page with i18n translations",
  "metaKeywords": "i18n, gatsbyjs, english"
}

{
  "hello": "Hola!",
  "metaDescription": "Página de ejemplo con traducciones i18n",
  "metaKeywords": "i18n, gatsbyjs, spanish"
}

locale/es/messages.json
{
  "hello": "Hi!",
  "metaDescription": "Sample page with i18n translations",
  "metaKeywords": "i18n, gatsbyjs, english"
}

{
  "hello": "Hola!",
  "metaDescription": "Página de ejemplo con traducciones i18n",
  "metaKeywords": "i18n, gatsbyjs, spanish"
}

作为额外的评论：

请记住将从gatsby导入的所有链接更改为
gatsby-plugin-i18next
必须在每个页面/模板中插入graphql
查询

您可以查看的代码，以了解如何在两种语言之间创建切换程序