React Router na PHP hostingu

Ako už viete, po zostavení projekt React predstavuje obyčajnú statiku, ktorú je možné nahrať na ľubovoľný hosting, a okamžite tam bude fungovať.

Avšak, existuje problém s React Routerom. Vec sa má tak, že Router pri práci mení URL stránok v prehliadači. Pritom sa reálne stránka neobnovuje, mení sa len URL prostredníctvom JavaScriptu.

Na webe, ktorý je nahraný na hosting, bude Router fungovať. Ale ak sa nachádzate na nejakej stránke webu, okrem hlavnej, a obnovíte ju, zobrazí sa chyba 404.

A to je logické, pretože prehliadač bude hľadať súbor pod zadanou URL adresou, ako to zvyčajne funguje pri statických webových stránkach. V našej aplikácii takáto stránka nebude existovať, pretože my ju len simulujeme, a v skutočnosti celá naša aplikácia beží na index.html.

Na vyriešenie problému je potrebné zabezpečiť, aby všetky URL adresy, ktoré nesmerujú na skutočne existujúce súbory, boli presmerované na index.html. Toto sa robí prostredníctvom webového servera, ktorý beží na hostingu.

Virtuálne hostingy bežia na PHP. Spravidla ako server sa používa Apache. V ňom je dostupný špeciálny súbor .htaccess, pomocou ktorého je možné nastaviť presmerovanie.

Na to je potrebné v koreni vášho webu umiestniť súbor .htaccess s nasledujúcim obsahom:

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

Vytvorte projekt s React Routerom.

Nahrajte ho na hosting. Presvedčte sa, že routing predvolene nefunguje.

Odstráňte problém pomocou súboru .htaccess.