Rezolvat: pagina de reîncărcare a routerului de reacție nu a fost găsită

Principala problemă legată de pagina de reîncărcare React Router care nu a fost găsită este că atunci când un utilizator reîmprospătează pagina, browserul va încerca să facă o cerere către server pentru adresa URL curentă. Cu toate acestea, deoarece React Router este rutare pe partea client, nu există o rută de server corespunzătoare pentru adresa URL și, astfel, este returnată o eroare 404 Not Found. Acest lucru poate fi mai ales problematic dacă utilizatorii se așteaptă să apară un anumit conținut la reîmprospătare.

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

// Linia 1: Această linie importă componentele BrowserRouter, Route și Switch din biblioteca react-router-dom.

// Linia 3: Această linie definește o funcție numită App care returnează codul JSX.

// Linia 5: Această linie include întregul cod JSX într-o componentă Router din react-router-dom.

// Linia 6: Această linie include toate rutele într-o componentă Switch de la react-router-dom.

// Liniile 7 – 9: Aceste linii definesc două rute pentru „/” și, respectiv, „/about” cu componentele lor respective (Acasă și Despre).

// Liniile 11 – 12: Aceste linii definesc o rută pentru când nicio altă rută nu se potrivește, ceea ce redă o etichetă h1 care spune „Pagina nu a fost găsită”.

Eroare pagina nu a fost găsită

Eroarea de pagină nu a fost găsită în React Router este o eroare care apare atunci când un utilizator încearcă să acceseze o pagină sau o rută care nu există. Acest lucru se poate întâmpla dacă utilizatorul a introdus greșit adresa URL sau dacă pagina pe care încearcă să o acceseze a fost eliminată sau mutată. În React Router, această eroare este gestionată utilizând prop de randare a componentei și transmiterea unei funcții care returnează o pagină 404. Acest lucru le permite dezvoltatorilor să creeze pagini 404 personalizate cu orice conținut doresc, cum ar fi linkuri utile sau un mesaj de scuze.

Cum mă ocup de pagina nu a fost găsită în routerul de reacții

Când utilizați React Router, puteți gestiona o pagină negăsită creând o rută personalizată care va reda o componentă NotFound atunci când adresa URL nu se potrivește cu niciuna dintre rutele existente. Pentru a face acest lucru, trebuie să creați o rută nouă cu calea setată la „*” și să redați componenta NotFound.

De exemplu:

} />

Aceasta se va potrivi cu orice adresă URL care nu este deja potrivită de o rută existentă și va afișa componenta NotFound.

Cum forțez o pagină care reacționează să se reîncarce

În React Router, puteți forța o pagină să se reîncarce utilizând metoda de înlocuire a obiectului istoric. Aceasta va înlocui intrarea curentă din stiva de istoric cu una nouă, forțând astfel o reîncărcare a paginii. Pentru a utiliza această metodă, trebuie mai întâi să obțineți acces la obiectul istoric. Puteți face acest lucru trecându-l ca suport atunci când creați componenta routerului:

const AppRouter = () => (

{/* Rutele tale aici */}

);

Odată ce aveți acces la obiectul istoric, puteți utiliza metoda de înlocuire a acestuia astfel:

history.replace('/some-route');