Mdx-файлы локализации языка Gatsby с помощью gatsby-plugin-intl

Question

Я пытаюсь локализовать страницы с помощью gatsby-plugin-intl. Нет проблем для файлов.js, как я описал ниже, но как мне сделать это для файлов.mdx?

import React from "react"
import { FormattedMessage, injectIntl, navigate } from "gatsby-plugin-intl"

const MyPage = ( {intl} ) => (
  <Layout>
     <h2><FormattedMessage id="TITLE"/></h2>
  </Layout>
)

export default injectIntl(MyPage)

Я пытаюсь сделать аналогичную логику здесь:

---
name: Settings
route: /documentation/settings
---

import { Playground, Props } from 'docz'
import { useIntl, Link, FormattedMessage } from "gatsby-plugin-intl"

const intl = useIntl()

## Settings

intl.formatMessage({ id: "TITLE"})

Answer 1

Все мысли выглядят правильно, но у вас есть ошибка в файле mdx

const intl = useIntl()

используйте компоненты FormattedMessage вместо примера сообщения

<FormattedMessage id="TITLE" />

или ваши компоненты

<Yourcomponents title={useIntl().formatMessage({ id: "TITLE" })} />

не используйте const