React Router PHP hosztingen

Ahogy már tudod, a buildelés után a React projekt egyszerű statikus fájlokat jelent, amelyek bármelyik hosztingre feltölthetők, és azonnal működni fognak.

Van azonban egy probléma a React Routerrel. A dolog az, hogy a Router működés közben megváltoztatja az oldalak URL-jét a böngészőben. Eközben az oldal valójában nem töltődik újra, csak az URL változik JavaScript segítségével.

A hosztingra feltöltött weboldalon a Router működni fog. De ha valamelyik oldalon, a főoldal kivételével, újratöltjük az oldalt, akkor egy 404 hibaüzenetet kapunk.

És ez logikus, hiszen a böngésző keresni fogja a fájlt a megadott URL alapján, ahogy az a statikus weboldalaknál szokásos. Az alkalmazásunkban viszont nem lesz ilyen oldal, mivel mi csak utánozzuk azokat, valójában pedig a teljes alkalmazásunk a index.html oldalon fut.

A probléma megoldásához azt kell elérnünk, hogy minden olyan URL, amely nem valódi, létező fájlra mutat, a index.html oldalra irányítson át. Ezt a hosztingen futó webszerver eszközeivel lehet megtenni.

A virtuális hosztingek PHP-n működnek. Általában Apache-t használnak szerverként. Itt elérhető egy speciális .htaccess fájl, amellyel átirányítás állítható be.

Ehhez a weboldalad gyökerébe el kell helyezned egy .htaccess fájlt a következő tartalommal:

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