Introduzione
Dopo aver creato una build di produzione della tua applicazione ReactJS, crea un file index.html, che serve l'intera applicazione. Tutte le richieste devono essere prima inviate a index.html, quindi il router React serve il contenuto in base alla query nell'URL. Quando accediamo all'applicazione con l'URL principale, raggiunge index.html e funziona correttamente. Nel caso in cui accedi direttamente a un URL secondario nel browser, il server web non trova alcun file con quel nome. In tal caso, all'utente viene restituito un messaggio di errore 404.
Problema
Un messaggio di errore 404 viene restituito dal server web quando raggiungiamo direttamente un URL secondario di un'applicazione ReactJS di produzione:
Soluzione
Una soluzione semplice consiste nell'instradare tutte le richieste al file index.html. Rest, il router React si occuperà di questo.
Aggiorna la configurazione del tuo server in base al server web in esecuzione.
Utenti Nginx
Gli utenti di Nginx possono modificare il file di configurazione del blocco del server (host virtuale) e aggiungere il seguente snippet. Questo indirizzerà tutte le richieste al file index.html:
#Add this in Nginx server block
location / {
...
try_files $uri.html $uri $uri/ /index.html;
...
}Utenti Apache
Se l'applicazione react è ospitata su un server Web Apache. Quindi puoi aggiungere un file .htaccess nella radice del tuo sito e aggiungere il seguente snippet.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>Assicurati che il modulo di riscrittura di Apache sia abilitato sul tuo sistema.
Conclusione
Questo tutorial ha aiutato a risolvere l'errore 404 nell'ambiente di produzione ReactJS.
