React Router na hostingu PHP

Jak już wiesz, po zbudowaniu projekt React reprezentuje zwykłe zasoby statyczne, które można załadować na dowolny hosting, i od razu będą tam działać.

Istnieje jednak problem z React Router. Chodzi o to, że Router podczas pracy zmienia URL stron w przeglądarce. Przy tym strona nie przeładowuje się naprawdę, a tylko zmienia się URL za pomocą JavaScript.

W stronie udostępnionej na hostingu, Router będzie działał. Ale, jeśli będąc na jakiejś stronie witryny, oprócz głównej, przeładujesz ją, to pojawi się błąd 404.

I to jest logiczne, ponieważ przeglądarka będzie szukać pliku pod podanym URL, jak zwykle działają statyczne strony. A w naszej aplikacji takiej strony nie będzie, ponieważ tylko symulujemy je, a tak naprawdę cała nasza aplikacja działa na index.html.

Aby rozwiązać problem, trzeba sprawić, aby wszystkie URL, które nie prowadzą do rzeczywiście istniejących plików, były przekierowywane na index.html. Robi się to za pomocą serwera internetowego, działającego na hostingu.

Hostingi wirtualne działają na PHP. Zazwyczaj jako serwer używany jest Apache. Dostępny jest w nim specjalny plik .htaccess, za pomocą którego można ustawić przekierowanie.

Aby to zrobić, w katalogu głównym twojej strony trzeba umieścić plik .htaccess z następującą zawartością:

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

Zrób projekt z React Router.

Wgraj go na hosting. Upewnij się, że domyślnie routing nie działa.

Napraw problem za pomocą pliku .htaccess.