Riješeno: React stranica za ponovno učitavanje usmjerivača nije pronađena

Glavni problem koji se odnosi na stranicu za ponovno učitavanje React Routera nije pronađena je taj što će, kada korisnik osvježi stranicu, preglednik pokušati uputiti zahtjev poslužitelju za trenutni URL. Međutim, budući da je React Router usmjeravanje na strani klijenta, ne postoji odgovarajuća ruta poslužitelja za URL i stoga se vraća pogreška 404 Not Found. To može biti posebno problematično ako korisnici očekuju da će se određeni sadržaj pojaviti nakon osvježavanja.

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

// Red 1: Ovaj red uvozi komponente BrowserRouter, Route i Switch iz biblioteke react-router-dom.

// Red 3: Ovaj red definira funkciju koja se zove App koja vraća JSX kod.

// Redak 5: Ovaj redak omata cijeli JSX kod u komponentu usmjerivača iz react-router-dom.

// Redak 6: Ovaj redak omata sve rute u komponenti Switch iz react-router-dom.

// Redovi 7 – 9: Ovi redovi definiraju dvije rute za '/' i '/about' s odgovarajućim komponentama (Home i About).

// Redovi 11 – 12: Ovi redovi definiraju rutu kada se druge rute ne podudaraju, što prikazuje oznaku h1 koja kaže "Stranica nije pronađena".

Stranica nije pronađena pogreška

Pogreška stranice nije pronađena u React Routeru je pogreška koja se javlja kada korisnik pokuša pristupiti stranici ili ruti koja ne postoji. To se može dogoditi ako je korisnik krivo upisao URL ili ako je stranica kojoj pokušava pristupiti uklonjena ili premještena. U React Routeru ova se pogreška rješava korištenjem komponenta za renderiranje i prosljeđivanje funkcije koja vraća stranicu 404. To programerima omogućuje stvaranje prilagođenih stranica 404 s bilo kojim sadržajem koji žele, poput korisnih poveznica ili poruka isprike.

Kako mogu postupiti Stranica nije pronađena u React usmjerivaču

Kada koristite React Router, možete obraditi stranicu koja nije pronađena stvaranjem prilagođene rute koja će prikazati NotFound komponentu kada se URL ne podudara ni s jednom od postojećih ruta. Da biste to učinili, trebate izraditi novu rutu sa stazom postavljenom na “*” i renderirati vašu NotFound komponentu.

Na primjer:

} />

Ovo će odgovarati bilo kojem URL-u koji već nije usklađen s postojećom rutom i prikazati vašu NotFound komponentu.

Kako mogu prisiliti stranicu koja reagira na ponovno učitavanje

U React Routeru možete prisilno ponovno učitati stranicu pomoću metode zamjene na povijesnom objektu. Ovo će zamijeniti trenutni unos u hrpu povijesti s novim, čime će se prisiliti ponovno učitavanje stranice. Da biste koristili ovu metodu, prvo morate dobiti pristup objektu povijesti. To možete učiniti tako da ga proslijedite kao rekvizit prilikom stvaranja komponente usmjerivača:

const AppRouter = () => (

{/* Vaše rute ovdje */}

);

Nakon što dobijete pristup povijesnom objektu, možete koristiti njegovu metodu zamjene na sljedeći način:

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