gatsby-plugin-react-i18next를 사용한 네임스페이스 구분자 구문

소개

gatsby-plugin-react-i18next을 사용하여 i18n(국제화)을 처음 배우다

이 특정 Gatsby 플러그인을 선택했습니다react-i18next.

그 이유는 그의 블로그React Internationalization with i18n > REACT INTERNATIONALIZATION: WHICH LIBRARY SHOULD I USE?에 있는 Robin Wieruch의 설명과 유사합니다.

문제

하지만 ":"구문을 사용하여 네임스페이스별로 키에 액세스하는 데 문제가 있었습니다.

예) text 네임스페이스에서 header 접근

i18next.t('header:text')

다음 파일로 선언되었습니다. <project root>/locales/<language>/header.json .

{
    text: "Greetings"
}

React 페이지에 header:text 대신 Greetings 가 표시되었습니다.

문제

문제는 gatsby-plugin-react-i18net > Configure the plugin 설명서의 예제 구성을 맹목적으로 복사하는 것이었습니다.

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-plugin-react-i18next`,
    options: {
      path: `${__dirname}/locales`,
      languages: [`en`, `es`, `de`],
      defaultLanguage: `en`,

      // you can pass any i18next options
      // pass following options to allow message content as a key
      i18nextOptions: {
        interpolation: {
          escapeValue: false // not needed for react as it escapes by default
        },
        keySeparator: false,
        // 👇 issue here
        nsSeparator: false
      },
      pages: [
        {
          matchPath: '/:lang?/blog/:uid',
          getLanguageFromPath: true,
          excludeLanguages: ['es']
        },
        {
          matchPath: '/preview',
          languages: ['en']
        }
      ]
    }
  }
];

각 옵션을 이해하지 않고 각 옵션을 몰랐습니다.
몇 시간 동안 검색한 결과 범인은 nsSeparator 으로 밝혀졌습니다.

해결책

기본nsSeparator 구분 기호에 대해 : 옵션을 그대로 두거나 문자열을 전달하여 네임스페이스 구문을 사용합니다.

예)

nsSeparator: ":"