如何在 Gatsby 项目中加载索引文件答案

【问题标题】：How to load index file in Gatsby project如何在 Gatsby 项目中加载索引文件
【发布时间】：2021-08-31 15:16:17
【问题描述】：

我正在将我的应用从 Create React App 移植到 Gatsby，但在运行 gatsby build 时出现了一些错误。

我认为我在设置 gatsby 的 index.js 文件时出错了

这是src/index.js 页面，现在我迁移到src/pages/index.js 我放了wrapRootElement，但一直出错。

import Store from './store';

someSetup();

export const wrapRootElement = () => {
  return (
    (
      <Errors>
        <>
          <HtmlHead
            title={`${getPageTitle()}`}
          />
          <Provider store={Store}>
            <Intl>
              <Router />
            </Intl>
          </Provider>
        </>
      </Errors>
    ),
    document.querySelector('#app')
  );
};

有谁知道我错了什么，如果我应该这样加载索引，因为它在创建反应应用程序中起作用？

我得到的错误很笼统： throw Error("Element type is invalid")。

检查'PageRenderer'的渲染方法。

【问题讨论】：

标签： javascript reactjs build gatsby

【解决方案1】：

如果你提供的 sn-p 是主页应该大写，就像任何其他 React 组件一样。简单地说：

const IndexPage = (props) => {

  return <div>I'm your homepage</div>

}

将虚拟 sn-p 粘贴到您的 index.js 文件中应该可以单独使用。

关于您的wrapRootElement，我猜您的意思是双浏览器-SSR API。如果要添加自定义包装元素，则需要在两个 gatsby-ssr.js 和 gatsby-browser.js 文件中添加以下内容，因为它是共享 API。

const React = require("react")
const { Provider } = require("react-redux")

const createStore = require("./src/state/createStore")
const store = createStore()

exports.wrapRootElement = ({ element }) => {
  return (
    <Provider store={store}>
      {element}
    </Provider>
  )
}

在这种情况下，我使用的是 Redux 商店。 element，在本例中，代表 Gatsby 构建的 React 元素，因此您将状态提供者包装在页面的每个元素中。随心所欲地调整它。

更多信息：

【讨论】：