添加gatsby插件布局后引起错误的injectIntl

Question

为了翻译我的站点，我在我的intl文件中注入了这样的layout.js：

import React from "react";
import { injectIntl } from "gatsby-plugin-intl";

const Layout = ({intl}) => (
    {intl.formatMessage({id: "history_text"})}
);

export default injectIntl(Layout)

但是，在我将gatsby-plugin-layout添加到我的项目(基于这个例子)之后，我得到了以下错误：

Error: [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.

如何在保留翻译的同时消除此错误？

这是相关的gatsby配置部分：

{
    resolve: `gatsby-plugin-intl`,
    options: {
        path: `${__dirname}/src/locale`,
        languages: [`en`, `de`],
        defaultLanguage: `de`,
        redirect: false,
    },
},
{
    resolve: `gatsby-plugin-layout`,
    options: {
        component: require.resolve(`./src/components/layout.js`),
    },
},

Answer 1

gatsby-plugin-layout和gatsby-plugin-intl都使用wrapPageElement API来创建包装器。

现在，gatsby中的插件是自上而下执行的，因此您需要在gatsby-plugin-layout之前定义gatsby-plugin-intl，以便gatsby-plugin-intl使用的IntlProvider提供程序封装布局组件，并且它可以使用injectIntl自定义。

{
    resolve: `gatsby-plugin-layout`,
    options: {
        component: require.resolve(`./src/components/layout.js`),
    },
},
{
    resolve: `gatsby-plugin-intl`,
    options: {
        path: `${__dirname}/src/locale`,
        languages: [`en`, `de`],
        defaultLanguage: `de`,
        redirect: false,
    },
},