Teiesugused lugejad aitavad MUO-d toetada. Kui teete ostu meie saidil olevate linkide abil, võime teenida sidusettevõtte komisjonitasu.
Looge kohandatud 404 leht lihtsa Reacti marsruudi abil, et pakkuda külastajatele kasulikku kogemust, kui nad seda kõige rohkem vajavad.
Varem või hiljem külastab kasutaja URL-i, mida teie veebisaidil pole. See, mida kasutaja pärast seda teeb, on teie otsustada.
Nad võivad vajutada tagasi nuppu ja teie saidilt lahkuda. Selle asemel saate pakkuda kasulikku 404-lehte, mis aitab neil jätkata teie veebisaidile navigeerimist.
Reacti veebisaitide puhul saate Reacti ruuteri abil luua kasuliku 404 ei leitud lehe.
404 lehe loomine
The 404 viga tekib siis, kui proovite külastada veebilehe lehte, mida server ei leia. Arendajana tähendab 404 vigade käsitlemine lehe loomist, mida server kasutab asendusena, kui ta ei leia soovitud lehte.
Reactis saate seda teha, luues leidmata komponendi, mis renderdatakse marsruutidel, mida pole olemas.
See artikkel eeldab, et teil on juba töötav Reacti rakendus, mille marsruutimine on seadistatud. Kui te seda ei tee, looge rakendus React ja seejärel installida Reageeri ruuter.
Looge uus fail nimega NotFound.js ja lisage 404 lehe loomiseks järgmine kood.
importida { Link } alates "react-ruuter-dom";
eksportidavaikimisifunktsiooniEi leitud() {
tagasi (
<div>
<h1>Oih! Sa paistad olevat eksinud.</h1>
<lk>Siin on mõned kasulikud lingid:</lk>
<Link ='/'>Kodu</Link>
<Link ='/blog'>Blogi</Link>
<Link ='/contact'>Võtke ühendust</Link>
</div>
)
}
See 404 leht renderdab sõnumi ja lingid, mis suunavad kasutaja veebisaidi tavalistele lehtedele.
Marsruutimine 404 lehele
Reacti ruuteri abil saate luua tavalise marsruudi järgmiselt:
importida { Marsruut, marsruudid } alates "react-ruuter-dom";
funktsiooniRakendus() {
tagasi (
<Marsruudid>
<Marsruudi tee="/" element={ <Kodu/> }/>
</Routes>
)
}
Määrate URL-i tee ja elemendi, mida soovite sellel marsruudil renderdada.
Leht 404 kuvatakse teede jaoks, mida veebisaidil pole. Nii et tee määramise asemel kasutage tärni (*).
<Marsruudi tee='*' element={<Ei leitud />}/>
Kasutades * renderdab komponendi NotFound kõigi URL-ide jaoks, mis pole marsruutides määratud.
Marsruutimine Reactis
Ruuteri abil saate hõlpsalt luua 404 lehe kõigi URL-ide jaoks, mida teie Reacti veebirakenduses pole.
Brauseritel on vaikimisi 404 leht, kuid kohandatud lehe loomine võimaldab kasutajatel öelda, mis läks valesti ja kuidas nad saavad seda parandada. Samuti saate luua 404 lehe, mis sobib teie kaubamärgiga.