Risolto: reazione router ricarica pagina non trovata

Il problema principale relativo alla pagina di ricarica di React Router non trovata è che quando un utente aggiorna la pagina, il browser tenterà di effettuare una richiesta al server per l'URL corrente. Tuttavia, poiché React Router è un routing lato client, non esiste una route del server corrispondente per l'URL e quindi viene restituito un errore 404 Not Found. Ciò può essere particolarmente problematico se gli utenti si aspettano che determinati contenuti vengano visualizzati durante l'aggiornamento.

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />

      {/* Page Not Found */}
      <Route render={() => (<h1>Page not found</h1>)} />

    </Switch>
  </Router>  
);

// Riga 1: questa riga importa i componenti BrowserRouter, Route e Switch dalla libreria react-router-dom.

// Riga 3: questa riga definisce una funzione chiamata App che restituisce il codice JSX.

// Riga 5: questa riga avvolge l'intero codice JSX in un componente Router da react-router-dom.

// Riga 6: questa riga avvolge tutti i percorsi in un componente Switch da react-router-dom.

// Righe 7 – 9: queste righe definiscono due percorsi rispettivamente per '/' e '/about' con i rispettivi componenti (Home e About).

// Righe 11 – 12: queste righe definiscono un percorso per quando nessun altro percorso corrisponde, che restituisce un tag h1 che dice "Pagina non trovata".

Pagina non trovata errore

L'errore di pagina non trovata in React Router è un errore che si verifica quando un utente tenta di accedere a una pagina o percorso che non esiste. Ciò può accadere se l'utente ha digitato in modo errato l'URL o se la pagina a cui sta tentando di accedere è stata rimossa o spostata. In React Router, questo errore viene gestito utilizzando il file prop di rendering del componente e passando una funzione che restituisce una pagina 404. Ciò consente agli sviluppatori di creare pagine 404 personalizzate con qualsiasi contenuto desiderino, come collegamenti utili o un messaggio di scuse.

Come gestisco la pagina non trovata nel router di reazione

Quando si utilizza React Router, è possibile gestire una pagina non trovata creando un percorso personalizzato che visualizzerà un componente NotFound quando l'URL non corrisponde a nessuno dei percorsi esistenti. Per fare ciò, devi creare un nuovo percorso con il percorso impostato su "*" e renderizzare il tuo componente NotFound.

Per esempio:

} />

Questo corrisponderà a qualsiasi URL che non sia già abbinato a un percorso esistente e renderà il tuo componente NotFound.

Come faccio a forzare il ricaricamento di una pagina che risponde

In React Router, puoi forzare il ricaricamento di una pagina utilizzando il metodo replace sull'oggetto history. Questo sostituirà la voce corrente nello stack della cronologia con una nuova, forzando così un ricaricamento della pagina. Per utilizzare questo metodo, devi prima ottenere l'accesso all'oggetto cronologia. Puoi farlo passandolo come prop durante la creazione del componente del router:

const AppRouter = () => (

{/* I tuoi percorsi qui */}

);

Una volta che hai accesso all'oggetto cronologia, puoi utilizzare il suo metodo di sostituzione in questo modo:

history.replace('/qualche-percorso');