React Router op PHP hosting

Zoals je al weet, is na het bouwen het React-project een gewone statische site, die op elke hosting geüpload kan worden, en het zal daar meteen werken.

Er is echter een probleem met React Router. Het punt is dat Router tijdens het werken de URL van pagina's in de browser wijzigt. Tegelijkertijd wordt de pagina niet echt herladen, maar wordt alleen de URL gewijzigd met JavaScript.

Op een site die op hosting is geplaatst, zal Router werken. Maar als je, terwijl je op een pagina van de site bent, behalve de homepage, de pagina vernieuwt, dan krijg je een 404 fout.

En dat is logisch, want de browser zal een bestand zoeken op de opgegeven URL, zoals statische sites normaal werken. En in onze applicatie zal zo'n pagina er niet zijn, omdat we ze alleen simuleren, terwijl in werkelijkheid onze hele applicatie draait op index.html.

Om het probleem op te lossen, moet je ervoor zorgen dat alle URL's die niet naar echt bestaande bestanden leiden, worden doorverwezen naar index.html. Dit wordt gedaan met de middelen van de webserver die op de hosting draait.

Virtuele hosting draait op PHP. Over het algemeen wordt Apache gebruikt als server. Daarin is een speciaal bestand .htaccess beschikbaar, waarmee je een doorverwijzing kunt instellen.

Hiervoor moet je in de root van je site een bestand .htaccess plaatsen met de volgende inhoud:

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

Maak een project met React Router.

Upload het naar de hosting. Zorg ervoor dat routing standaard niet werkt.

Los het probleem op met behulp van het bestand .htaccess.