Gatsby

Question

我的 Gatsby 4 项目中 wrapPageElement 有问题。

wrapPageElement.js

import React from 'react';

import { PathProvider } from './src/providers/path';
import Layout from './src/components/layout/layout';

// Pass all props (hence the ...props)
// to the layout component so it has access to things like pageContext or location
const wrapPageElement = ({ element, props: { location } }) => (
  <PathProvider path={location.pathname}>
    <Layout>{element}</Layout>
  </PathProvider>
);

export default wrapPageElement;

我正在使用 wrapPageElement 在所有页面上重用我的布局，但布局在通过 wrapPageElement 包含时不会正确更新其 React 状态。如果我改为在我的页面中呈现布局，它工作正常。

盖茨比-brower.js

import './src/styles/global.css';

import CustomProviders from './wrapWithProvider';
import CustomLayout from './wrapPageElement';

export const wrapPageElement = CustomLayout;
export const wrapRootElement = CustomProviders;

我调用的 Layout 中导航栏中的视图组件：

const { language, defaultLanguage } = useI18next();
console.log('locale', language);

当我使用 I18next 更改我的页面语言时，“区域设置”不会更改值。但是，如果我在页面中呈现布局，“语言环境”会将其值更改为更新后的语言。

我应该注意到，除了 Gatsby 生命周期文件，我的所有项目都使用 TypeScript，例如wrapPageElement.js

感谢任何帮助！不确定根本原因究竟在哪里？

附加代码

布局组件

 return (
    <div className="page">
      <Helmet>
        <meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0" />
        <meta name="description" content={props.description || description} />
        <meta name="image" content={props.imagePath || image} />
        <title>{props.title || title}</title>
        {props.noIndex && <meta name="robots" content="noindex" />}
      </Helmet>
      <Navbar />
      <main className="m-10 mt-60">{children}</main>
      <Footer />
    </div>
  );
};

导航栏组件

  return (
    <nav className="bg-green-300 w-full fixed top-0">
      <ul className="flex flex-row gap-5 m-10">
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li className="ml-auto">
          <ChangeLanguageLink language="en">EN</ChangeLanguageLink>
        </li>
        <li>
          <ChangeLanguageLink language="th">TH</ChangeLanguageLink>
        </li>
      </ul>
    </nav>
  );

ChangeLanguageLink 组件

const ChangeLanguageLink: React.FC<React.PropsWithChildren<ChangeLanguageLinkProps>> = ({ children, ...props }) => {
  const { originalPath } = useI18next();

  return (
    <LocalizedLink {...props} to={addFinalSlash(originalPath)}>
      {children}
    </LocalizedLink>
  );
};

Answer 1

我提取的是您正在尝试使用 I18next 来更新状态，但您可能不需要包装整个应用程序来实现这一点。 const { language, defaultLanguage } = useI18next(); 将为您提供当前语言。

也就是说，如果您一直想要您的方法，wrapPageElement 和 wrapRootElement 是 Gatsby SSR 和 Gatsby 浏览器之间共享的包装器（因此得名），因此在 gatsby-ssr.js您需要添加准确的信息：

import CustomProviders from './wrapWithProvider';
import CustomLayout from './wrapPageElement';

export const wrapPageElement = CustomLayout;
export const wrapRootElement = CustomProviders;

请记住，wrapRootElement 是一个永远不会在整个应用程序中卸载的包装器。

Gatsby - wrapPageElement 中的布局不更新状态

Gatsby - Layout in wrapPageElement does not update state

javascript

reactjs