React-snapshot предварительно отображает index. html на всех маршрутах с помощью create-react-app и serve - PullRequest
Новая
       78

React-snapshot предварительно отображает index. html на всех маршрутах с помощью create-react-app и serve

1 голос
/ 19 июня 2020

Я использую приложение create-react-app и react-snapshot для предварительного рендеринга. Обслуживание сборки с помощью serve 

serve -s build -l 80

Но, как ни странно, для всех маршрутов предварительно визуализируется только index. js.

Ниже представлена ​​конфигурация реактивного снимка в пакете. json

"reactSnapshot": {
    "exclude": [
      "/districts-data",
      "/districts-data?*",
      "/suggest-time",
      "/covid-19-statistics"
    ],
    "snapshotDelay": 300
  }

Я исключил все пути, которые включают отложенную загрузку. Я прошел через этот ответ, но я ничего не улавливаю в моем сервис-воркере, просто оставил его для PWA. 

sw.js

self.addEventListener('fetch', function (event) {

});

self.addEventListener('install', function (event) {

});

self.addEventListener('activate', (event) => { });

1 Ответ

0 голосов
/ 26 июня 2020

Вложив пару дней и глубоко погрузившись в код serve, я понял, что делал ошибку, когда использовал параметр -s при запуске сценария обслуживания. 

serve -s build -l 80

Наличие параметра -s по умолчанию все маршруты обслуживаются из индекса. html. Наличие флага -s необходимо, если вы просто обслуживаете сборку, созданную с помощью приложения Create response, иначе маршруты, отличные от «/», вернут ответ 400.

Вы можете просто использовать serve build если у вас есть все маршруты, предварительно обработанные, но если есть некоторые маршруты, для которых у вас нет предварительно обработанных HTML доступных (для моего случая использования это были компоненты, использующие ленивую загрузку), вы можете создать serve. json в папке publi c с указанием источника и назначения. 

 {
  "rewrites": [
    { "source": "/districts-data", "destination": "/200.html" },
    { "source": "/districts-data?*", "destination": "/200.html" },
    { "source": "/suggest-time", "destination": "/200.html" },
    { "source": "/covid-19-statistics", "destination": "/200.html" }
  ]
}

Вам также необходимо изменить вашу команду serve на serve -c serve.json build. - c используется для указания указать пользовательский путь к serve.json.

...