pageContext 在 Gatsby JS 中仍然未定义

Question

我正在按照本教程创建基于 Gatsby JS 的多语言网站：

https://itnext.io/techniques-approaches-for-multi-language-gatsby-apps-8ba13ff433c5

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

.pageContext.js

import React from 'react';
import { useTranslation } from 'react-i18next';

const PageContext = React.createContext({});

export const PageContextProvider = ({ children, pageContext }) => {
  const { i18n } = useTranslation();
  i18n.changeLanguage(pageContext.lang);

  return <PageContext.Provider value={pageContext}>{children}</PageContext.Provider>;
};

export const usePageContext = () => React.useContext(PageContext);

这是我的盖茨比-node.js

const path = require('path')
const fs = require('fs-extra')
const _ = require('lodash')
const { createFilePath } = require('gatsby-source-filesystem')
const config = require('./gatsby-config')

exports.onCreatePage = async ({ page, actions: { createPage, deletePage } }) => {

  await deletePage(page);

  await Promise.all(
    config.siteMetadata.supportedLanguages.map(async lang => {
      
      const originalPath = page.path;
      const localizedPath = `/${lang}${page.path}`

      await createPage({
        ...page,
        path: localizedPath,
        context: {
          ...page.context,
          originalPath,
          lang,
        },
      });
    })
  );
};

这是盖茨比-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>;
};

这是我的盖茨比-browser.js

export { wrapPageElement, wrapRootElement } from './gatsby-ssr';

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

TypeError: Cannot read property 'lang' of undefined

指的是pageContext.js

的第8行

所以基本上 pageContext 仍然未定义，即使 onCreatePage 似乎工作正常。

我整天都在努力解决这个问题，但仍然不知道。如果您能看到帮助，非常感谢。

Answer 1

这定义了一个 PageContextProvider 组件接受 children 和一个 pageContext prop:

const PageContextProvider = ({ children, pageContext })

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

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

不过你是这样使用它的：

<PageContextProvider value={props.pageContext}>{element}</PageContextProvider>

这是传递一个未被使用的 value 道具。您可能想要更新 PageContextProvider 的定义以接受 value prop:

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

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

这会将所有道具传递给实际的 PageContext.Provider，同时仍然像以前一样利用它们来调用您的 i18n.changeLanguage 函数。

Answer 2

原来是gatsby里面的wrapPageElement出错了-ssr.js
下面是正确的：

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

pageContext 在 Gatsby JS 中仍然未定义

pageContext remains undefined in Gatsby JS

reactjs

gatsby

react-i18next