Riješeno: stranica za ponovno učitavanje react rutera nije pronađena

Glavni problem vezan za React Router stranicu za ponovno učitavanje koja nije pronađena je taj što kada korisnik osvježi stranicu, pretraživač će pokušati da uputi zahtjev serveru za trenutni URL. Međutim, pošto React Router usmjerava na strani klijenta, ne postoji odgovarajuća ruta servera za URL i stoga se vraća greška 404 Not Found. Ovo može biti posebno problematično ako korisnici očekuju da će se određeni sadržaj pojaviti prilikom 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>  
);

// Linija 1: Ova linija uvozi komponente BrowserRouter, Route i Switch iz biblioteke react-router-dom.

// Linija 3: Ova linija definira funkciju pod nazivom App koja vraća JSX kod.

// Red 5: Ova linija omotava cijeli JSX kod u komponentu rutera iz react-router-dom.

// Red 6: Ova linija obavija sve rute u komponenti Switch iz react-router-dom.

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

// Redovi 11 – 12: Ovi redovi definiraju rutu kada se nijedna druga ruta ne podudara, što prikazuje h1 oznaku koja kaže “Stranica nije pronađena”.

Stranica nije pronađena greška

Greška stranice nije pronađena u React Routeru je greška koja se javlja kada korisnik pokuša pristupiti stranici ili ruti koja ne postoji. Ovo se može dogoditi ako je korisnik pogrešno unio URL ili ako je stranica kojoj pokušavaju pristupiti uklonjena ili premještena. U React Routeru, ova greška se rješava korištenjem komponente za renderiranje i prosljeđivanje funkcije koja vraća 404 stranicu. Ovo omogućava programerima da kreiraju prilagođene 404 stranice sa sadržajem koji žele, kao što su korisni linkovi ili poruka izvinjenja.

Kako da postupam sa Stranica nije pronađena u react ruteru

Kada koristite React Router, možete rukovati stranicom koja nije pronađena kreiranjem prilagođene rute koja će prikazati komponentu NotFound kada URL ne odgovara nijednoj od postojećih ruta. Da biste to učinili, trebate kreirati novu rutu sa putanjom postavljenom na “*” i renderirati vašu NotFound komponentu.

Na primjer:

} />

Ovo će odgovarati bilo kojem URL-u koji se već ne podudara s postojećom rutom i generirati vašu NotFound komponentu.

Kako da prisilim stranicu koja reaguje da se ponovo učita

U React Routeru, možete prisiliti stranicu da se ponovo učita korištenjem metode zamjene na objektu historije. Ovo će zamijeniti trenutni unos u hrpi historije novim, čime će se prisiliti ponovno učitavanje stranice. Da biste koristili ovu metodu, prvo morate dobiti pristup objektu historije. To možete učiniti tako što ćete ga proslijediti kao prop kada kreirate komponentu rutera:

const AppRouter = () => (

{/* Vaše rute ovdje */}

);

Jednom kada imate pristup objektu historije, možete koristiti njegovu metodu zamjene na sljedeći način:

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