Pagrindinė problema, susijusi su „React Router 404“ peradresavimu, yra ta, kad ją gali būti sunku įdiegti. Kadangi „React Router“ neturi integruoto 404 puslapio, kūrėjai turi rankiniu būdu sukurti 404 puslapio maršrutą ir sukonfigūruoti maršrutizatorių, kad peradresuotų visas užklausas, kurios neatitinka esamo maršruto. Tam reikia papildomo kodo ir konfigūracijos, o tai gali užtrukti ir sunkiai derinti, jei kas nors negerai. Be to, jei naudotojas naršo tiesiai į URL, kurio nėra, jis vis tiek matys klaidos puslapį, o ne bus nukreiptas į 404 puslapį.
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>
);
// 1 eilutė: ši eilutė importuoja BrowserRouter, Route ir Switch komponentus iš react-router-dom bibliotekos.
// 3 eilutė: ši eilutė apibrėžia funkciją, vadinamą programa, kuri grąžina JSX.
// 5–7 eilutės: šios eilutės apvynioja programos komponentą maršrutizatoriaus komponente iš react-router-dom.
// 8-10 eilutės: šios eilutės atitinkamai apibrėžia du komponentų Pagrindinis ir Apie maršrutus.
// 12 eilutė: ši eilutė apibrėžia maršrutą, kuris nukreipia į pagrindinį puslapį, jei nesutampa joks kitas maršrutas.
Kas yra 404 klaidos kodas
„React Router“ klaidos kodas 404 yra HTTP būsenos kodas, nurodantis, kad prašomo šaltinio nepavyko rasti. Paprastai jis grąžinamas, kai vartotojas bando pasiekti puslapį arba maršrutą, kurio nėra. Taip gali nutikti, jei vartotojas neteisingai įvedė URL arba jei puslapis buvo pašalintas arba perkeltas neatnaujinus nuorodų į jį. Kai taip atsitiks, „React Router“ parodys bendrą 404 puslapį su atitinkamu pranešimu, informuojančiu vartotoją apie klaidą.
404 Peradresuoti
React Router 404 peradresavimas yra būdas nukreipti vartotojus į kitą puslapį, kai jie bando pasiekti netinkamą URL. Tai gali būti naudinga siekiant suteikti vartotojams geresnę patirtį, kai jie įveda neteisingą URL arba bando pasiekti puslapį, kurio nėra. 404 peradresavimas gali būti įgyvendintas naudojant React Router komponentą Redirect, kuris leidžia nurodyti puslapio, į kurį norite nukreipti vartotoją, kelio pavadinimą. Pavyzdžiui, jei kas nors bando pasiekti /invalid-url, galite naudoti peradresavimo komponentą taip:
