React Router pe hosting PHP

După cum știți deja, după build proiectul React reprezintă conținut static obișnuit, care poate fi încărcat pe orice hosting, și va funcționa imediat acolo.

Există, totuși, o problemă cu React Router. Faptul este că Router-ul în timpul funcționării schimbă URL-ul paginilor în browser. În același timp, pagina nu se reîncarcă cu adevărat, ci doar se schimbă URL-ul prin mijloace JavaScript.

Într-un site, publicat pe hosting, Router-ul va funcționa. Dar, dacă vă aflați pe o pagină a site-ului, altă decât cea principală, și o reîncărcați, veți primi o eroare 404.

Și este logic, pentru că browser-ul va căuta un fișier la URL-ul specificat, așa cum funcționează de obicei site-urile statice. Și în aplicația noastră această pagină nu va exista, deoarece noi doar simulăm prezența ei, iar în realitate toată aplicația noastră rulează pe index.html.

Pentru a rezolva problema, trebuie făcut astfel încât toate URL-urile care nu duc către fișiere reale existente, să fie redirecționate către index.html. Acest lucru se face prin mijloacele serverului web, care funcționează pe hosting.

Hosting-urile virtuale funcționează pe PHP. De obicei, ca server este folosit Apache. În el este disponibil un fișier special .htaccess, cu ajutorul căruia puteți seta redirecționarea.

Pentru aceasta, în rădăcina site-ului dvs. trebuie să plasați fișierul .htaccess cu următorul conținut:

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

Realizați un proiect cu React Router.

Încărcați-l pe hosting. Asigurați-vă că implicit routing-ul nu funcționează.

Remediați problema cu ajutorul fișierului .htaccess.