(Risolto) – Errore 404 ReactJS durante il ricaricamento della pagina

19 apr 2022 1 min di lettura
(Risolto) – Errore 404 ReactJS durante il ricaricamento della pagina
Indice dei contenuti

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.

Buy me a coffeeBuy me a coffee

Supportaci se ti piacciono i nostri contenuti. Grazie.

Partecipa alla conversazione

Successivamente, completa il checkout per l'accesso completo a Noviello.it.
Bentornato! Accesso eseguito correttamente.
Ti sei abbonato con successo a Noviello.it.
Successo! Il tuo account è completamente attivato, ora hai accesso a tutti i contenuti.
Operazione riuscita. Le tue informazioni di fatturazione sono state aggiornate.
La tua fatturazione non è stata aggiornata.