Čitatelji poput vas podržavaju MUO. Kada kupite putem poveznica na našoj stranici, možemo zaraditi partnersku proviziju.
Izradite prilagođenu stranicu 404 koristeći jednostavnu React rutu kako biste svojim posjetiteljima pružili korisno iskustvo kada im je najpotrebnije.
Prije ili kasnije, korisnik će posjetiti URL koji ne postoji na vašoj web stranici. Što će korisnik učiniti nakon ovoga ovisi o vama.
Mogli bi pritisnuti gumb za povratak i napustiti vašu stranicu. Umjesto toga, možete pružiti korisnu stranicu 404 koja će im pomoći da nastave navigirati do vaše web stranice.
Za React web stranice, možete koristiti React router za stvaranje korisne stranice 404 not found.
Stvaranje stranice 404
The 404 pogreška događa se kada pokušate posjetiti stranicu na web stranici koju poslužitelj ne može pronaći. Kao programer, rukovanje pogreškama 404 znači stvaranje stranice koju poslužitelj koristi kao zamjenu kada ne može pronaći traženu stranicu.
U Reactu to radite stvaranjem komponente koja nije pronađena koja će se prikazati na rutama koje ne postoje.
Ovaj članak pretpostavlja da već imate radnu React aplikaciju s postavljenim usmjeravanjem. Ako ne, izraditi React aplikaciju a zatim instalirajte React Router.
Napravite novu datoteku pod nazivom NotFound.js i dodajte sljedeći kod za izradu stranice 404.
uvoz { Veza } iz "react-router-dom";
izvozzadanofunkcijaNije pronađeno() {
povratak (
<div>
<h1>Ups! Čini se da si izgubljen.</h1>
<str>Evo nekoliko korisnih poveznica:</str>
<Veza na='/'>Dom</Link>
<Veza na='/blog'>Blog</Link>
<Veza na='/contact'>Kontakt</Link>
</div>
)
}
Ova stranica 404 prikazuje poruku i veze za preusmjeravanje korisnika na uobičajene stranice na web-mjestu.
Usmjeravanje na stranicu 404
Možete stvoriti normalnu rutu pomoću React usmjerivača ovako:
uvoz { Ruta, Rute } iz "react-router-dom";
funkcijaaplikacija() {
povratak (
<Rute>
<Staza rute="/" element={ <Dom/> }/>
</Routes>
)
}
Navodite URL stazu i element koji želite prikazati na toj ruti.
Stranica 404 prikazuje putove koji ne postoje na web stranici. Dakle, umjesto navođenja puta, upotrijebite zvjezdicu (*).
<Staza rute='*' element={<Nije pronađeno />}/>
Korištenje * prikazuje komponentu NotFound za sve URL-ove koji nisu navedeni u rutama.
Usmjeravanje u Reactu
Pomoću usmjerivača možete jednostavno izraditi stranicu 404 za sve URL-ove koji ne postoje u vašoj React web aplikaciji.
Preglednici imaju zadanu stranicu 404, ali stvaranje prilagođene omogućuje vam da kažete svojim korisnicima što je pošlo po zlu i kako to mogu popraviti. Također možete izraditi stranicu 404 koja se uklapa u vaš brend.
