Riješeno: reagovati ruter 404 preusmjeravanje

Glavni problem vezan za React Router 404 preusmjeravanje je taj što može biti teško implementirati. Pošto React Router nema ugrađenu 404 stranicu, programeri moraju ručno kreirati rutu za stranicu 404, a zatim konfigurirati ruter da preusmjeri sve zahtjeve koji se ne podudaraju s postojećom rutom. Ovo zahtijeva dodatni kod i konfiguraciju, što može trajati dugo i teško za otklanjanje grešaka ako nešto krene po zlu. Osim toga, ako korisnik dođe direktno do URL-a koji ne postoji, i dalje će vidjeti stranicu s greškom umjesto da bude preusmjeren na stranicu 404.

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

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

      {/* 404 Redirect */}
      <Route render={() => (<Redirect to="/" />)} /> 

    </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.

// Redovi 5-7: Ovi redovi omotavaju komponentu aplikacije u komponentu rutera iz react-router-dom.

// Redovi 8-10: Ovi redovi definiraju dvije rute za komponente Home i About.

// Red 12: Ova linija definira rutu koja preusmjerava na početnu stranicu ako se ne podudara nijedna druga ruta.

Šta je 404 kod greške

Kôd greške 404 u React Routeru je HTTP statusni kod koji ukazuje da traženi resurs nije mogao biti pronađen. Obično se vraća 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 uklonjena ili premještena bez ažuriranja veza do nje. Kada se to dogodi, React Router će prikazati generičku 404 stranicu s odgovarajućom porukom koja obavještava korisnika o njihovoj grešci.

404 Preusmjeravanje

U React Routeru, 404 preusmjeravanje je način da se korisnici preusmjere na drugu stranicu kada pokušaju pristupiti nevažećem URL-u. Ovo može biti korisno za pružanje boljeg iskustva korisnicima kada unesu netačan URL ili pokušaju pristupiti stranici koja ne postoji. 404 preusmjeravanje se može implementirati pomoću komponente Preusmjeravanje iz React Routera, koja vam omogućava da odredite ime putanje stranice na koju želite preusmjeriti korisnika. Na primjer, ako neko pokuša pristupiti /invalid-url, možete koristiti komponentu Redirect ovako:

Slični postovi:

Ostavite komentar