Glavna težava, povezana s preusmeritvijo React Router 404, je, da jo je težko implementirati. Ker React Router nima vgrajene strani 404, morajo razvijalci ročno ustvariti pot za stran 404 in nato konfigurirati usmerjevalnik, da preusmeri vse zahteve, ki se ne ujemajo z obstoječo potjo. To zahteva dodatno kodo in konfiguracijo, kar je lahko dolgotrajno in težko za odpravljanje napak, če gre kaj narobe. Poleg tega, če se uporabnik pomakne neposredno na URL, ki ne obstaja, bo še vedno videl stran z napako, namesto da bi bil preusmerjen na stran 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>
);
// Vrstica 1: Ta vrstica uvozi komponente BrowserRouter, Route in Switch iz knjižnice react-router-dom.
// Vrstica 3: Ta vrstica definira funkcijo, imenovano App, ki vrne JSX.
// Vrstice 5-7: Te vrstice zavijejo komponento aplikacije v komponento usmerjevalnika iz react-router-dom.
// Vrstice 8-10: Te vrstice določajo dve poti za komponente Domov in O komponenti.
// Vrstica 12: Ta vrstica definira pot, ki preusmeri na domačo stran, če se ne ujema nobena druga pot.
Kaj je koda napake 404
Koda napake 404 v React Routerju je statusna koda HTTP, ki označuje, da zahtevanega vira ni bilo mogoče najti. Običajno se vrne, ko uporabnik poskuša dostopati do strani ali poti, ki ne obstaja. To se lahko zgodi, če je uporabnik napačno vnesel URL ali če je bila stran odstranjena ali premaknjena, ne da bi posodobili povezave do nje. Ko se to zgodi, bo React Router prikazal generično stran 404 z ustreznim sporočilom, ki uporabnika obvešča o njegovi napaki.
404 Preusmeritev
V React Routerju je preusmeritev 404 način za preusmeritev uporabnikov na drugo stran, ko poskušajo dostopati do neveljavnega URL-ja. To je lahko koristno za zagotavljanje boljše izkušnje uporabnikom, ko vnesejo napačen URL ali poskušajo dostopati do strani, ki ne obstaja. Preusmeritev 404 je mogoče implementirati s komponento Redirect iz React Routerja, ki vam omogoča, da določite ime poti do strani, na katero želite preusmeriti uporabnika. Na primer, če nekdo poskuša dostopati do /invalid-url, lahko uporabite komponento Preusmeritev takole:
