React Router na PHP hostingu

Jak již víte, po sestavení projekt React představuje obyčejnou statiku, kterou lze nahrát na jakýkoli hosting, a bude tam ihned fungovat.

Existuje však problém s React Router. Jde o to, že Router při práci mění URL stránek v prohlížeči. Při tom se stránka skutečně nepřenačítá, mění se pouze URL pomocí JavaScriptu.

Na webu, umístěném na hostingu, bude Router fungovat. Ale pokud se nacházíte na nějaké stránce webu, kromě hlavní, a přenačtete ji, objeví se 404 chyba.

A to je logické, protože prohlížeč bude hledat soubor podle zadaného URL, jak obvykle fungují statické weby. A v naší aplikaci taková stránka nebude, protože je pouze simulujeme, ve skutečnosti celá naše aplikace běží na index.html.

K vyřešení problému je třeba zařídit, aby všechna URL, nevedoucí na skutečně existující soubory, byla přesměrována na index.html. To se dělá prostředky webového serveru, který na hostingu běží.

Virtuální hostingy běží na PHP. Jako server se obvykle používá Apache. V něm je dostupný speciální soubor .htaccess, pomocí kterého lze nastavit přesměrování.

K tomu je třeba v kořenu vašeho webu umístit soubor .htaccess s následujícím obsahem:

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

Vytvořte projekt s React Router.

Nahrajte jej na hosting. Přesvědčte se, že ve výchozím nastavení routování nefunguje.

Opravte problém pomocí souboru .htaccess.