Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat.
Creați o pagină personalizată 404 folosind o rută React simplă pentru a oferi vizitatorilor o experiență utilă atunci când au cea mai mare nevoie.
Mai devreme sau mai târziu, un utilizator va vizita o adresă URL care nu există pe site-ul dvs. web. Ce face utilizatorul după aceasta depinde de dvs.
S-ar putea să apese butonul Înapoi și să părăsească site-ul dvs. În schimb, puteți oferi o pagină 404 utilă pentru a-i ajuta să continue să navigheze pe site-ul dvs. web.
Pentru site-urile web React, puteți utiliza routerul React pentru a crea o pagină utilă 404 negăsit.
Crearea unei pagini 404
The eroare 404 apare atunci când încercați să vizitați o pagină de pe un site web pe care serverul nu o poate găsi. În calitate de dezvoltator, gestionarea erorilor 404 înseamnă crearea unei pagini pe care serverul o folosește ca înlocuitor atunci când nu poate găsi pagina solicitată.
În React, faceți acest lucru creând o componentă negăsită care va fi redată pe rute care nu există.
Acest articol presupune că aveți deja o aplicație React funcțională cu rutare configurată. Dacă nu, creați o aplicație React și apoi instalați React Router.
Creați un fișier nou numit NotFound.js și adăugați următorul cod pentru a crea pagina 404.
import { Link } din "react-router-dom";
exportMod implicitfuncţieNu a fost găsit() {
întoarcere (
<div>
<h1>Hopa! Se pare că ești pierdut.</h1>
<p>Iată câteva link-uri utile:</p>
<Link către='/'>Acasă</Link>
<Link către='/blog'>Blog</Link>
<Link către='/contact'>a lua legatura</Link>
</div>
)
}
Această pagină 404 redă un mesaj și linkuri pentru a redirecționa un utilizator către pagini comune de pe site.
Dirijare către pagina 404
Puteți crea o rută normală folosind routerul React astfel:
import { Rută, Rute } din "react-router-dom";
funcţieApp() {
întoarcere (
<Trasee>
<Calea traseului="/" element={ <Acasă/> }/>
</Routes>
)
}
Specificați calea URL și elementul pe care doriți să îl redați pe ruta respectivă.
Pagina 404 se afișează pentru căile care nu există pe site. Deci, în loc să specificați calea, utilizați un asterisc (*).
<Calea traseului='*' element={<Nu a fost găsit />}/>
Folosind * redă componenta NotFound pentru toate adresele URL nespecificate în rute.
Rutare în React
Puteți crea cu ușurință o pagină 404 pentru toate adresele URL care nu există în aplicația web React folosind un router.
Browserele au o pagină implicită 404, dar crearea uneia personalizată vă permite să spuneți utilizatorilor ce a mers prost și cum pot remedia acest lucru. De asemenea, puteți crea o pagină 404 care se potrivește mărcii dvs.
