Reactjs pageContext在Gatsby JS中未定义

我将按照本教程创建一个基于Gatsby JS的多语言网站：

我正在创建一个ContextProvider，如下所示：

.pageContext.js

这是盖茨比ssr.js

import React from 'react';
import i18n from './src/i18n';
import { I18nextProvider } from 'react-i18next';
import { PageContextProvider } from './src/pageContext';

export const wrapRootElement = ({ element }) => {
  return <I18nextProvider i18n={i18n}>{element}</I18nextProvider>;
};

export const wrapPageElement = ({ element, props }) => {
  return <PageContextProvider value={props.pageContext}>{element}</PageContextProvider>;
};

正在创建这些页面，但当我尝试从浏览器访问它们时，出现以下错误：

TypeError:无法读取未定义的属性“lang”

它指的是pageContext.js的第8行

因此，基本上pageContext仍然未定义，即使onCreatePage似乎工作正常

我整天都在努力解决这个问题，还是不知道。

---

如果您能看到帮助，非常感谢。

这定义了一个

PageContextProvider

组件，该组件接受

子项和
pageContext
属性：

const PageContextProvider = ({ children, pageContext })

export const PageContextProvider = (props) => {
  const { i18n } = useTranslation();
  i18n.changeLanguage(props.value.lang);

  return <PageContext.Provider {...props} />;
};

当你使用它时，你会像这样传递这些道具：

<PageContextProvider pageContext="some value">Children here</PageContextProvider>

这将通过所有道具传递到实际的
PageContext.Provider
，同时仍然点击它们来调用您的
i18n.changeLanguage
函数，如前所述。
这定义了一个
PageContextProvider
组件，该组件接受
子组件和
PageContext
道具：

const PageContextProvider = ({ children, pageContext })

export const PageContextProvider = (props) => {
  const { i18n } = useTranslation();
  i18n.changeLanguage(props.value.lang);

  return <PageContext.Provider {...props} />;
};

当你使用它时，你会像这样传递这些道具：

<PageContextProvider pageContext="some value">Children here</PageContextProvider>

这将通过所有道具传递到实际的
PageContext.Provider
，同时仍然像以前一样点击它们来调用
i18n.changeLanguage
函数。
结果是，错误出现在gatsby ssr.js内的wrapPageElement中

下面是正确的一个：

export const wrapPageElement = ({ element, props }) => {
  return <PageContextProvider pageContext={props.pageContext}>{element}</PageContextProvider>;
};

export const wrapPageElement=（{element，props}）=>{
返回{element}；
};
结果是，错误出现在gatsby ssr.js内的wrapPageElement中

下面是正确的一个：

export const wrapPageElement = ({ element, props }) => {
  return <PageContextProvider pageContext={props.pageContext}>{element}</PageContextProvider>;
};

export const wrapPageElement=（{element，props}）=>{
返回{element}；
};
您在哪里使用my gatsby-ssr.js和gatsby-browser.js中的
PageContextProvider
。我正在更新我的问题以包括这些，谢谢。您在哪里使用我的gatsby-ssr.js和gatsby-browser.js中的
PageContextProvider
。我正在更新我的问题，以包括这些，谢谢。@coreward感谢您的帮助，但它仍然不能正常工作。我会继续工作@coreward感谢您的帮助，但是它仍然不能正常工作。我会继续工作！