Только пути клиента GatsbyJs переходят на страницу 404, когда URL-адрес напрямую доступен в браузере в «производственном режиме»

Question

Я создал приложение Gatsby и настроил gatsby-node.js для создания только клиентских путей, которые прекрасно работают в процессе разработки и имеют прямой доступ к URL-адресу пути, но не в производстве.

пример:

if(page.path.match(/^\/sample/)){
     page.matchPath = "/sample/:value1/:value2/:value3";
     createPage(page)
  }

Я использую heroku для развертывания приложения

Answer 1

Почему

Хотя маршрутизатор на стороне клиента знает об этом пути, соответствующий HTML-файл отсутствует. Когда браузер просматривает сайт, он сначала загружает файл 404.html, сгенерированный gatsby, который включает клиентский маршрутизатор. Как только маршрутизатор завершает свою инициализацию, он читает путь и загружает правильную страницу. Это значит, что вы попали в нужное место, но на неправильной странице полсекунды приземления.

Как это исправить

Общее решение - указать вашему серверу перенаправить /sample/ путь к вашему /sample/index.html файлу. Способ сделать это зависит от вашего хоста, но я предоставлю название методики для разных хостов на случай, если вы захотите посмотреть его. Обычно это называется перезаписью URL и должно поддерживаться всеми основными хостинговыми платформами.

• Netlify: Перенаправления
• Firebase: URL перезаписывает
• Nginx: Переписать направления
• Apache: Mod_Rewrite
• Amazon S3: Настройка перенаправления веб-страницы
• Cloudflare: Переадресация URL

Heroku

В разделе Heroku документации по развертыванию gatsby предлагается использовать модуль heroku-buildpack-static , который имеет встроенную поддержку "пользовательских маршрутов", что решит эту проблему для вашего случая. используя такой синтаксис:

{
  "routes": {
    "/sample/**": "sample/index.html",
  }
}