Не теряйте нервы из-за этого
Итак, вы наконец завершили работу над приложением React, над которым работали, и развернули его на Netlify. Все выглядит прекрасно, вы испытываете теплое чувство удовлетворения от хорошо выполненной работы.
Пока вы не поймете...
Попыткаполучить прямой доступ к подмаршруту приводит к ошибке 404!
Но почему?
Ну, проблема в том, что React Router обрабатывает маршрутизацию на стороне клиента (в браузере), но Netlify по умолчанию рассматривает вашу страницу как статический веб-сайт и не настроен для правильной обработки маршрутизации на стороне клиента.
Что это значит?
React — это одностраничное приложение (SPA). В вашем проекте может быть много компонентов и «страниц», но на самом деле весь контент в SPA находится в одном HTML-файле. В случае React это обычно index.html в вашей папке /public.
Затем маршрутизация обрабатывается на стороне клиента вашей структурой маршрутизатора. Когда вы переходите по разным маршрутам в своем одностраничном приложении, React динамически отображает и обновляет содержимое без перезагрузки всей страницы.
Теперь мы подходим к моменту, когда возникает проблема...
Сервер не понимает этот механизм маршрутизации на стороне клиента. Как мы уже говорили ранее, по умолчанию ваш SPA рассматривается как статический веб-сайт. Поэтому, если вы попытаетесь напрямую ввести определенный URL-адрес и получить к нему доступ, сервер будет искать соответствующий статический файл для этого маршрута.
Но, как вы уже догадались, его там нет.
Сейчас уже не 1990-е, и мы используем React, на самом деле мы не обслуживаем статические файлы.
Забавный факт!
В настоящее время менее 2% веб-сайтов являются статическими.
Как это исправить?
Как всегда, ответ частично можно найти в Документации Netlify, но не всегда удается его найти. В конце концов, именно поэтому мы пишем эти статьи... чтобы делиться знаниями и помогать нуждающимся разработчикам.
Давайте перейдем к делу.
Шаг 1:
Создайте netlify.toml в корне репозитория, если у вас его еще нет. Если вы это сделаете, работайте в рамках уже существующего.
Это файл конфигурации Netlify, определяющий различные параметры развертывания Netlify, одним из которых является маршрутизация.
Шаг 2:
Добавьте следующий скрипт в файл netlify.toml:
[[redirects]] from = "/*" to = "/index.html" status = 200
Давайте немного разберем это.
[[redirects]] в первой строке указывает, что мы будем определять правила перенаправления в следующих строках.
[[redirects]]
Далее следует from = “/*”определение шаблона маршрута для сопоставления и перенаправления.
from = "/*"
В третьей строке у нас есть to = “/index.html”. Он сообщает серверу место назначения перенаправления.
to = "/index.html
Наконец, у нас есть status = 200.Эта строка определяет код состояния HTTP для ответа перенаправления.
status = 200
Заключение
Вот и все, довольно простое решение неприятной проблемы.
Спасибо, что дочитали до конца! Если вы нашли эту статью полезной, рассмотрите возможность оставить комментарий, подписаться или несколько хлопков (да, вы можете сделать больше).
