Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo.
Ustvarite stran 404 po meri z uporabo preproste poti React, da svojim obiskovalcem omogočite koristno izkušnjo, ko jo najbolj potrebujejo.
Prej ali slej bo uporabnik obiskal URL, ki na vašem spletnem mestu ne obstaja. Kaj bo uporabnik naredil po tem, je odvisno od vas.
Lahko pritisnejo gumb za nazaj in zapustijo vaše spletno mesto. Namesto tega lahko zagotovite uporabno stran 404, ki jim bo pomagala nadaljevati navigacijo do vašega spletnega mesta.
Za spletna mesta React lahko uporabite usmerjevalnik React, da ustvarite uporabno stran 404 not found.
Ustvarjanje strani 404
The 404 napaka se pojavi, ko poskušate obiskati stran na spletnem mestu, ki je strežnik ne najde. Kot razvijalec obravnavanje napak 404 pomeni ustvarjanje strani, ki jo strežnik uporabi kot zamenjavo, ko ne najde zahtevane strani.
V Reactu to storite tako, da ustvarite komponento, ki ni bila najdena, ki bo upodobljena na poteh, ki ne obstajajo.
Ta članek predvideva, da že imate delujočo aplikacijo React z nastavljenim usmerjanjem. Če ne, ustvarite aplikacijo React in nato namestite React Router.
Ustvarite novo datoteko z imenom NotFound.js in dodajte naslednjo kodo, da ustvarite stran 404.
uvoz { Povezava } od "react-router-dom";
izvozprivzetofunkcijoNi najdeno() {
vrnitev (
<div>
<h1>Ups! Zdi se, da ste izgubljeni.</h1>
<str>Tukaj je nekaj koristnih povezav:</str>
<Povezava do='/'>domov</Link>
<Povezava do='/blog'>Blog</Link>
<Povezava do='/contact'>Kontakt</Link>
</div>
)
}
Ta stran 404 prikaže sporočilo in povezave za preusmeritev uporabnika na običajne strani na spletnem mestu.
Usmerjanje na stran 404
Z usmerjevalnikom React lahko ustvarite običajno pot tako:
uvoz {Pot, Poti} od "react-router-dom";
funkcijoaplikacija() {
vrnitev (
<Poti>
<Pot poti="/" element={ <Domov/> }/>
</Routes>
)
}
Določite pot URL in element, ki ga želite upodobiti na tej poti.
Stran 404 se prikaže za poti, ki ne obstajajo na spletnem mestu. Torej namesto podajanja poti uporabite zvezdico (*).
<Pot poti='*' element={<Ni najdeno />}/>
Uporaba * upodobi komponento NotFound za vse URL-je, ki niso podani v smereh.
Usmerjanje v Reactu
Z usmerjevalnikom lahko enostavno ustvarite stran 404 za vse URL-je, ki ne obstajajo v vaši spletni aplikaciji React.
Brskalniki imajo privzeto stran 404, vendar ustvarjanje strani po meri omogoča, da uporabnikom poveste, kaj je šlo narobe in kako lahko to popravijo. Ustvarite lahko tudi stran 404, ki ustreza vaši blagovni znamki.
