React Router auf PHP-Hosting

Wie Sie bereits wissen, ist ein gebuilldetes React-Projekt normale Statik, die auf jedem Hosting hochgeladen werden kann und dort sofort funktionieren wird.

Es gibt jedoch ein Problem mit React Router. Die Sache ist die, dass der Router während der Arbeit die URL der Seiten im Browser ändert. Dabei wird die Seite nicht wirklich neu geladen, sondern nur die URL mittels JavaScript geändert.

Auf einer Website, die auf dem Hosting veröffentlicht ist, wird der Router funktionieren. Aber wenn Sie sich auf einer beliebigen Seite der Website, außer der Hauptseite, befinden und diese neu laden, erscheint ein 404 Fehler.

Und das ist logisch, denn der Browser wird nach einer Datei unter der angegebenen URL suchen, wie es bei statischen Websites üblich ist. In unserer Anwendung wird es diese Seite jedoch nicht geben, da wir sie nur simulieren, und tatsächlich läuft unsere gesamte Anwendung auf index.html.

Um das Problem zu lösen, muss man es so einrichten, dass alle URLs, die nicht auf tatsächlich existierende Dateien verweisen, auf index.html umgeleitet werden. Dies geschieht mit den Mitteln des Web-Servers, der auf dem Hosting läuft.

Virtuelle Hostings laufen auf PHP. In der Regel wird Apache als Server verwendet. Dort ist eine spezielle Datei .htaccess verfügbar, mit der man die Weiterleitung einrichten kann.

Dazu müssen Sie im Stammverzeichnis Ihrer Website die Datei .htaccess mit folgendem Inhalt ablegen:

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

Erstellen Sie ein Projekt mit React Router.

Laden Sie es auf das Hosting hoch. Stellen Sie sicher, dass das Routing standardmäßig nicht funktioniert.

Beheben Sie das Problem mithilfe der Datei .htaccess.