Solucionat: no s'ha trobat la pàgina de recàrrega de l'encaminador de reacció

El principal problema relacionat amb la pàgina de recàrrega de React Router que no s'ha trobat és que quan un usuari actualitza la pàgina, el navegador intentarà fer una sol·licitud al servidor per a l'URL actual. Tanmateix, com que React Router és un encaminament del costat del client, no hi ha cap ruta de servidor corresponent per a l'URL i, per tant, es retorna un error 404 Not Found. Això pot ser especialment problemàtic si els usuaris esperen que aparegui determinat contingut durant l'actualització.

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>  
);

// Línia 1: aquesta línia importa els components BrowserRouter, Route i Switch de la biblioteca react-router-dom.

// Línia 3: aquesta línia defineix una funció anomenada App que retorna el codi JSX.

// Línia 5: aquesta línia embolcalla tot el codi JSX en un component d'encaminador de react-router-dom.

// Línia 6: aquesta línia embolcalla totes les rutes en un component Switch de react-router-dom.

// Línies 7 – 9: aquestes línies defineixen dues rutes per a '/' i '/about' respectivament amb els seus components respectius (Inici i Sobre).

// Línies 11 - 12: aquestes línies defineixen una ruta per quan no coincideix cap altra ruta, que mostra una etiqueta h1 que diu "Pàgina no trobada".

Error de pàgina no trobada

L'error de pàgina no trobada a React Router és un error que es produeix quan un usuari intenta accedir a una pàgina o ruta que no existeix. Això pot passar si l'usuari ha escrit malament l'URL o si la pàgina a la qual està intentant accedir s'ha eliminat o mogut. A React Router, aquest error es gestiona mitjançant l' el suport de renderització del component i passa una funció que retorna una pàgina 404. Això permet als desenvolupadors crear pàgines personalitzades 404 amb el contingut que vulguin, com ara enllaços útils o un missatge de disculpa.

Com puc gestionar la pàgina no trobada al router de reacció

Quan utilitzeu React Router, podeu gestionar una pàgina que no s'ha trobat creant una ruta personalitzada que representarà un component NotFound quan l'URL no coincideixi amb cap de les rutes existents. Per fer-ho, heu de crear una ruta nova amb el camí establert en "*" i renderitzar el vostre component NotFound.

Per exemple:

} />

Això coincidirà amb qualsevol URL que encara no coincideixi amb una ruta existent i representarà el vostre component NotFound.

Com obligo a tornar a carregar una pàgina que reacciona

A React Router, podeu forçar una pàgina a tornar a carregar mitjançant el mètode de substitució de l'objecte d'historial. Això substituirà l'entrada actual a la pila d'historial per una de nova, forçant així una recàrrega de la pàgina. Per utilitzar aquest mètode, primer heu d'accedir a l'objecte d'historial. Podeu fer-ho passant-lo com a accessori quan creeu el vostre component d'encaminador:

const AppRouter = () => (

{/* Les teves rutes aquí */}

);

Un cop tingueu accés a l'objecte d'historial, podeu utilitzar el seu mètode de substitució de la següent manera:

history.replace('/alguna ruta');