Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti.
Vytvořte si vlastní stránku 404 pomocí jednoduché trasy React, abyste svým návštěvníkům poskytli užitečné zkušenosti, když to nejvíce potřebují.
Dříve nebo později uživatel navštíví adresu URL, která na vašem webu neexistuje. Co uživatel udělá poté, je na vás.
Mohou stisknout tlačítko Zpět a opustit váš web. Místo toho můžete poskytnout užitečnou stránku 404, která jim pomůže pokračovat v navigaci na váš web.
Pro webové stránky React můžete použít směrovač React k vytvoření užitečné stránky 404 nenalezeno.
Vytvoření stránky 404
The chyba 404 nastane, když se pokusíte navštívit stránku na webu, kterou server nemůže najít. Jako vývojář zpracování chyb 404 znamená vytvoření stránky, kterou server použije jako náhradu, když nemůže požadovanou stránku najít.
V Reactu to uděláte vytvořením nenalezené komponenty, která se bude vykreslovat na trasách, které neexistují.
Tento článek předpokládá, že již máte funkční aplikaci React s nastaveným směrováním. Pokud ne, vytvořit aplikaci React a poté nainstalovat Reagovat Router.
Vytvořte nový soubor s názvem NotFound.js a přidejte následující kód pro vytvoření stránky 404.
import { Odkaz } z "react-router-dom";
vývoznívýchozífunkceNenalezeno() {
vrátit se (
<div>
<h1>Jejda! Zdá se, že jsi ztracený.</h1>
<p>Zde je několik užitečných odkazů:</str>
<Odkaz na ='/'>Domov</Link>
<Odkaz na ='/blog'>Blog</Link>
<Odkaz na ='/contact'>Kontakt</Link>
</div>
)
}
Tato stránka 404 vykreslí zprávu a odkazy pro přesměrování uživatele na běžné stránky na webu.
Směrování na stránku 404
Normální trasu můžete vytvořit pomocí routeru React takto:
import { Route, Routes } z "react-router-dom";
funkceAplikace() {
vrátit se (
<Trasy>
<Cesta cesty ="/" element={ <Domov/> }/>
</Routes>
)
}
Zadáte cestu URL a prvek, který chcete na této trase vykreslit.
Stránka 404 se zobrazí pro cesty, které na webu neexistují. Místo zadání cesty tedy použijte hvězdičku (*).
<Cesta cesty ='*' element={<Nenalezeno />}/>
Použitím * vykreslí komponentu NotFound pro všechny adresy URL, které nejsou uvedeny v trasách.
Směrování v Reactu
Pomocí routeru můžete snadno vytvořit stránku 404 pro všechny adresy URL, které ve vaší webové aplikaci React neexistují.
Prohlížeče mají výchozí stránku 404, ale vytvoření vlastní stránky vám umožní sdělit uživatelům, co se pokazilo a jak to mohou opravit. Můžete také vytvořit stránku 404, která se hodí k vaší značce.