Question

我正在尝试使用入门模板之一使用Gatsby创建一个React网站。我已经大量定制了Gatsby入门程序。我有一些专用路由，只限于登录用户。这些内部页面似乎可以在本地开发服务器（gatsby开发）上完美地呈现，并且当我第一次运行gatsby build和gatsby serve时，它们似乎可以很好地呈现，但是当我单击刷新时，它们的标题和其余部分网站内容被切断（例如，甚至不可用，甚至无法向上滚动到标题和顶部内容，只是不返回到屏幕）。我试图弄清楚为什么会发生这种关闭行为，以及为什么它似乎只出现在生产版本中。我在gatsby开发中没有看到类似的结果。

我一直在用一个页面构建站点，并为客户端路由设置了到达路由器，并认为我的路由（包括默认情况下没有找到页面）可能会引起问题，但是删除该页面并不能解决问题。我还创建了一个固定位置的标头，并认为这可能是问题所在，但是当我将标头设置为相对而不是固定在屏幕顶部时，它似乎并没有解决。

我想将此问题至少重定向到我可以准确描述的内容...当我的页面呈现时，它显示了一个CSS类，名为“ not-found”的div，仅在没有路由匹配时显示我的路由器，但是它将我的有效组件（例如仪表板）包装在该div中，即使不是预期的设计，也可以找到它，但是当我重新加载时，我会在其余部分之前快速浏览未找到的页面呈现...我也不希望“找不到”显示在有效页面上...您能在我的结构中看到任何导致此结果的东西吗？

我的index.js gatsby页面：

import React from "react";

import App from '../components/App';
import { Helmet } from 'react-helmet';
import Amplify from 'aws-amplify';

Amplify.configure({
    Auth: {

        // REQUIRED - Amazon Cognito Region
        region: 'us-east-1',

        // OPTIONAL - Amazon Cognito User Pool ID
        userPoolId: '***********',

        // OPTIONAL - Amazon Cognito Web Client ID (26-char alphanumeric string)
        userPoolWebClientId: '*******************'
    }
});


const IndexPage = () => (
    <div>
        <App>
            <Helmet>
                <title>Clean up your cloud</title>
            </Helmet>
        </App>
    </div>
)

export default IndexPage;

我的app.js gatsby页面：

import React from "react"
import { Router } from "@reach/router"
import { Provider } from 'react-redux'

import Login from "../components/Login"
import SignUp from "../components/SignUp"
import PrivateRoute from "../components/PrivateRoute"
import Dashboard from '../components/Dashboard';
import RulesPage from '../components/RulesPage';
import AccountsPage from '../components/AccountsPage'
import Features from '../components/Features'
import Home from '../components/Home'
import Pricing from '../components/Pricing'
import SupportPage from '../components/SupportPage'
import Settings from '../components/Settings'
import Docs from '../components/Docs';
import NotFound from '../components/NotFound';
import Users from '../components/Users';
import History from '../components/History';

import store from '../store'

const App = () => (
    <Provider store={store}>
        <Router>
            <Home path="/" />
            <PrivateRoute path="/app/dashboard" component={Dashboard} />
            <PrivateRoute path="/app/rules" component={RulesPage} />
            <PrivateRoute path="/app/accounts" component={AccountsPage} />
            <PrivateRoute path="/app/users" component={Users} />
            <PrivateRoute path="/app/settings" component={Settings} />
            <PrivateRoute path="/app/support" component={SupportPage} />
            <PrivateRoute path="/app/history" component={History} />
            <Login path="/app/login" />
            <SignUp path="/app/signup" />
            <Features path="/app/features" />
            <Pricing path="/app/pricing" />
            <Docs path="/app/docs" />
            <NotFound default />
        </Router>
    </Provider>
  )

  export default App;

Answer 1

本质上，gatsby develop会在您的IDE /代码编辑器和浏览器之间打开websocket通讯，而不是一目了然地构建和组装所有资产，只是再现工作环境的最低要求。

gatsby develop在后台运行服务器，从而启用实时重新加载和Gatsby的数据浏览器等有用的功能。它针对快速反馈和额外的调试信息进行了优化。

Gatsby的build命令应该在您为网站添加了画龙点睛的东西后运行。 gatsby build使用生产就绪型优化功能来创建您网站的版本，例如打包您网站的配置，数据和代码，以及创建所有静态HTML页面，这些页面最终被重新合成为React应用程序。该过程可能会导致两种环境之间的行为不同。

由于Webpack订单问题，在develop下工作（不太严格）的某些东西甚至可能无法在构建模式下编译。

您可以在Overview of Gatsby Build Process中查看更多信息（和游乐场）。

盖茨比：为什么网站对本地服务器和生产版本的呈现方式有所不同？

1 个答案: