React Router на PHP хостинге

Как вы уже знаете, после сборки проект React представляет собой обычную статику, которую можно загрузить на любой хостинг, и она там сразу будет работать.

Есть, однако, проблема с React Router. Дело в том, что Router при работе меняет URL страниц в браузере. При этом реально страница не перезагружается, а только меняется URL средствами JavaScript.

В сайте, выложенном на хостинг, Router будет работать. Но, если находясь на какой-то странице сайта, кроме главной, перезагрузить ее, то вывалится 404 ошибка.

И это логично, ведь браузер будет искать файл по заданному URL, как обычно работают статичные сайты. А в нашем приложении такой страницы не будет, так как мы только имитируем их, а на самом деле все наше приложение работает на index.html.

Для решения проблемы нужно сделать так, чтобы все URL, не ведущие на реально существующие файлы, перенаправлялись на index.html. Это делается средствами web-сервера, работающего на хостинге.

Виртуальные хостинги работают на PHP. Как правило в качестве сервера используется Apache. В нем доступен специальный файл .htaccess, с помощью которого можно задать перенаправление.

Для этого вам в корне вашего сайта нужно разместить файл .htaccess со следующим содержимым:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Сделайте проект с React Router.

Залейте его на хостинг. Убедитесь, что по умолчанию роутинг не работает.

Исправьте проблему с помощью файла .htaccess.