Гэтсби: почему сайт отображается по-разному для локального сервера по сравнению с производственной сборкой?

Question

Я пытаюсь создать сайт React с Gatsby, используя один из стартовых шаблонов.Я сильно настроил стартер Гэтсби.У меня есть несколько частных маршрутов, которые я ограничиваю для зарегистрированных пользователей.Кажется, что эти внутренние страницы прекрасно отображаются на локальном сервере разработки (разработка gatsby), и они выглядят нормально при первом запуске gatsby build и gatsby serve, но когда я нажимаю на них обновление, мой заголовок и часть остальныхконтент сайта обрезается (как, например, даже не доступен, нет возможности даже прокрутить до верхнего и верхнего содержимого, он просто не возвращается на экран).Я пытаюсь выяснить, почему происходит такое отключенное поведение, и почему оно только появляется в производственной сборке.Я не вижу подобных результатов в разработке gatsby.

Я создавал свой сайт с помощью одной страницы и маршрутизатора досягаемости, настроенного для маршрутизации на стороне клиента, и подумал, что моя маршрутизация (в том числе наличие страницы, не найденной какdefault), возможно, вызывал проблемы, но удаление этого не решило проблемы.Я также создал фиксированный заголовок позиции и подумал, что, может быть, в этом и заключается проблема, но, похоже, она не решается, когда я сделал заголовок относительным, а не зафиксированным в верхней части экрана.

Я бы хотел перенаправитьэтот вопрос, по крайней мере, что-то, что я могу точно описать ... когда моя страница отображается, он показывает div с CSS-классом с именем 'not-found', который должен отображаться только тогда, когда ни один маршрут не соответствует моему маршрутизатору, но вместо этого он оборачивает мой действительныйкомпоненты (например, панель инструментов) в этом div для not-found, даже если это не предназначенный дизайн ... и когда я перезагружаюсь, я вижу быстрое мигание страницы not-found до того, как остальные рендерится ... я бы тоже не сталнапример «not-found», чтобы отображаться вообще на действительных страницах ... видите ли вы в моей структуре что-нибудь, что могло бы привести к этому?

Моя страница 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;