React Router su hosting PHP

Come già sapete, dopo la build il progetto React rappresenta una normale staticità, che può essere caricata su qualsiasi hosting, e funzionerà immediatamente.

C'è, tuttavia, un problema con React Router. Il fatto è che Router durante il funzionamento cambia l'URL delle pagine nel browser. In questo caso, la pagina non viene effettivamente ricaricata, ma cambia solo l'URL tramite JavaScript.

In un sito, pubblicato su hosting, Router funzionerà. Ma, se ci si trova su una pagina del sito, diversa dalla home page, e la si ricarica, verrà visualizzato un errore 404.

Ed è logico, poiché il browser cercherà un file all'URL specificato, come funzionano normalmente i siti statici. E nella nostra applicazione quella pagina non esisterà, poiché noi la stiamo solo simulando, e in realtà tutta la nostra applicazione funziona su index.html.

Per risolvere il problema è necessario fare in modo che tutti gli URL che non portano a file realmente esistenti, vengano reindirizzati su index.html. Questo viene fatto tramite il server web, che funziona sull'hosting.

Gli hosting virtuali funzionano su PHP. Di solito come server viene utilizzato Apache. In esso è disponibile un file speciale .htaccess, con il quale è possibile impostare un reindirizzamento.

Per fare questo, nella root del vostro sito dovete posizionare un file .htaccess con il seguente contenuto:

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

Create un progetto con React Router.

Caricatelo sull'hosting. Assicuratevi che per impostazione predefinita il routing non funzioni.

Risolvete il problema utilizzando il file .htaccess.