Riješeno: reagirajte na preusmjeravanje usmjerivača 404

Glavni problem vezan uz React Router 404 preusmjeravanje je taj što ga je teško implementirati. Budući da React Router nema ugrađenu stranicu 404, programeri moraju ručno kreirati rutu za stranicu 404, a zatim konfigurirati usmjerivač da preusmjerava sve zahtjeve koji ne odgovaraju postojećoj ruti. To zahtijeva dodatni kod i konfiguraciju, što može oduzimati puno vremena i teško ih je otkloniti ako nešto pođe po zlu. Osim toga, ako korisnik izravno navigira na URL koji ne postoji, i dalje će vidjeti stranicu s pogreš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>  
);

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

// Redak 3: Ovaj redak definira funkciju pod nazivom App koja vraća JSX.

// Redovi 5-7: Ovi redovi omataju komponentu aplikacije u komponentu usmjerivača iz react-router-dom.

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

// Redak 12: Ovaj redak definira rutu koja preusmjerava na početnu stranicu ako nijedna druga ruta ne odgovara.

Što je šifra pogreške 404

Kôd pogreške 404 u React Routeru je HTTP statusni kod koji označava da se traženi resurs ne može pronaći. Obično se vraća 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 uklonjena ili premještena bez ažuriranja veza na nju. Kada se to dogodi, React Router će prikazati generičku stranicu 404 s odgovarajućom porukom koja obavještava korisnika o pogrešci.

404 Preusmjeravanje

U React Routeru, 404 preusmjeravanje je način preusmjeravanja korisnika 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 netočan URL ili pokušaju pristupiti stranici koja ne postoji. Preusmjeravanje 404 može se implementirati pomoću komponente Redirect iz React Routera, koja vam omogućuje da navedete naziv putanje stranice na koju želite preusmjeriti korisnika. Na primjer, ako netko pokuša pristupiti /invalid-url, možete upotrijebiti komponentu Redirect ovako:

Povezani postovi:

Ostavite komentar