Gatsby JS 中的 pageContext 仍未定义

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);

这是我的 gatsby-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,
        },
      });
    })
  );
};

这是 gatsby-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>;
};

这是我的 gatsby-browser.js

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

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

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

它指的是pageContext.js的第8行

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

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

Answer 1

原来，错误出现在 gatsby-ssr.js 中的 wrapPageElement
下面是正确的：

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

Answer 2

这定义了一个接受children 和pageContext 属性的PageContextProvider 组件：

const PageContextProvider = ({ children, pageContext })

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

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

不过，你是这样使用它的：

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

这是传递一个未被使用的value 属性。您可能想要更新 PageContextProvider 的定义以接受 value 属性：

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

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

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