Čitatelia ako vy pomáhajú podporovať MUO. Keď uskutočníte nákup pomocou odkazov na našej stránke, môžeme získať pridruženú províziu.
Vytvorte si vlastnú 404 stránku pomocou jednoduchej trasy React, aby ste svojim návštevníkom poskytli užitočnú skúsenosť, keď to najviac potrebujú.
Skôr alebo neskôr používateľ navštívi adresu URL, ktorá na vašom webe neexistuje. Čo urobí používateľ potom, je na vás.
Môžu stlačiť tlačidlo Späť a opustiť váš web. Namiesto toho môžete poskytnúť užitočnú stránku 404, ktorá im pomôže pokračovať v navigácii na váš web.
Pre webové stránky React môžete použiť smerovač React na vytvorenie užitočnej stránky 404 nenájdené.
Vytvorenie stránky 404
The chyba 404 nastane, keď sa pokúsite navštíviť stránku na webovej lokalite, ktorú server nemôže nájsť. Ako vývojár, spracovanie chýb 404 znamená vytvorenie stránky, ktorú server použije ako náhradu, keď nemôže nájsť požadovanú stránku.
V React to urobíte vytvorením nenájdeného komponentu, ktorý sa vykreslí na neexistujúcich cestách.
Tento článok predpokladá, že už máte fungujúcu aplikáciu React s nastaveným smerovaním. Ak nie, vytvorte aplikáciu React a potom nainštalujte Reagovať Router.
Vytvorte nový súbor s názvom NotFound.js a pridajte nasledujúci kód na vytvorenie stránky 404.
importovať { Link } od "react-router-dom";
exportpredvolenáfunkciuNenájdené() {
vrátiť (
<div>
<h1>Ojoj! Zdá sa, že si stratený.</h1>
<p>Tu je niekoľko užitočných odkazov:</str>
<Odkaz na ='/'>Domov</Link>
<Odkaz na ='/blog'>Blog</Link>
<Odkaz na ='/contact'>Kontakt</Link>
</div>
)
}
Táto stránka 404 zobrazuje správu a odkazy na presmerovanie používateľa na bežné stránky na webovej lokalite.
Smerovanie na stránku 404
Normálnu trasu môžete vytvoriť pomocou smerovača React takto:
importovať { Route, Routes } od "react-router-dom";
funkciuApp() {
vrátiť (
<Trasy>
<Cesta trasy ="/" element={ <Domov/> }/>
</Routes>
)
}
Zadáte cestu URL a prvok, ktorý chcete na tejto trase vykresliť.
Stránka 404 sa zobrazuje pre cesty, ktoré na webovej lokalite neexistujú. Takže namiesto zadania cesty použite hviezdičku (*).
<Cesta trasy ='*' element={<Nenájdené />}/>
Použitím * vykreslí komponent NotFound pre všetky adresy URL, ktoré nie sú uvedené v trasách.
Smerovanie v Reacte
Pomocou smerovača môžete jednoducho vytvoriť stránku 404 pre všetky adresy URL, ktoré neexistujú vo vašej webovej aplikácii React.
Prehliadače majú predvolenú stránku 404, ale vytvorenie vlastnej stránky vám umožní povedať používateľom, čo sa pokazilo a ako to môžu opraviť. Môžete tiež vytvoriť stránku 404, ktorá sa hodí k vašej značke.
