Question

我第一次在一个简单的网站项目上使用Gatsby。我已经习惯了传统的React应用，其中有一个根文件组件，通常是一个“ App.js”，可以附加提供程序和其他全局级别的功能。

Gatsby不提供根App.js，但是提供了wrapRootElement和wrapPageElement，经过一番争吵之后，它们在我的本地主机上工作得很好。

export const wrapRootElement = ({ element }) => {
    return (
        <ThemeProvider theme={theme}>
            {element}
        </ThemeProvider>
    )
}

和

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

在gatsby-browser.js内部（并带有适当的本地导入等）

（将Root用作主题提供程序，将Page用作布局包装程序，其中包括页眉和页脚元素）

我使用过“ gatsby clean”然后使用“ gatsby build”来生成可部署的公用文件夹，但是在上传到共享主机时，仅显示内部部分，而不显示页眉或页脚，也没有显示主题颜色。

一时兴起，我下载了Gatsby并提取了他们的“ using-redux”示例，进行了构建，并将其部署到具有相同结果的同一共享主机上-也就是说，它的行为不符合预期。

我想念什么？由于它在Gatsby示例中失败，因此我将其推测为与服务器端设置有关（回想一下，它在localhost上运行良好）。我已经安装了Node，但是没有将其用作此应用程序的一部分；它打算完全是静态的，我只是想使用包装器来清理我的代码。

Answer 1

经过更多研究之后，我将gatsby-browser.js中的代码复制到gatsby-ssr.js中。瞧，它奏效了。

这篇文章启发了我，其中包括：https://www.gatsbyjs.org/docs/api-files-gatsby-browser/。它指出：

如果您使用其中之一，请考虑是否应同时使用两者 gatsby-ssr.js和gatsby-browser.js。

我之前已经阅读了这篇文章，但是并没有将gatsby-ssr.js文件作为必需项。显然，我应该更加有力地解释“应该”一词。

Gatsby wrapRootElement / wrapPageElement可在localhost上运行，但不会一次部署到共享主机上

1 个答案: