Tokie skaitytojai kaip jūs padeda palaikyti MUO. Kai perkate naudodami nuorodas mūsų svetainėje, galime uždirbti filialų komisinius.
Sukurkite tinkintą 404 puslapį naudodami paprastą „React“ maršrutą, kad suteiktumėte lankytojams naudingos patirties, kai jiems to labiausiai reikia.
Anksčiau ar vėliau vartotojas aplankys URL, kurio jūsų svetainėje nėra. Ką vartotojas veiks po to, priklauso nuo jūsų.
Jie gali paspausti grįžimo mygtuką ir palikti jūsų svetainę. Vietoj to galite pateikti naudingą 404 puslapį, kuris padės jiems toliau naršyti į jūsų svetainę.
„React“ svetainėse galite naudoti „React“ maršrutizatorių, kad sukurtumėte naudingą 404 nerasta puslapį.
404 puslapio kūrimas
The 404 klaida įvyksta, kai bandote apsilankyti svetainės puslapyje, kurio serveris neranda. Kaip kūrėjas, tvarkyti 404 klaidas reiškia sukurti puslapį, kurį serveris naudoja kaip pakaitalą, kai negali rasti pageidaujamo puslapio.
Programoje „React“ tai darote sukurdami nerasta komponentą, kuris bus pateiktas maršrutuose, kurių nėra.
Šiame straipsnyje daroma prielaida, kad jau turite veikiančią „React“ programą, kurioje nustatytas maršruto parinkimas. Jei ne, sukurti „React“ programą ir tada įdiegti Reaguoti maršrutizatorius.
Sukurkite naują failą pavadinimu NotFound.js ir pridėkite šį kodą, kad sukurtumėte 404 puslapį.
importuoti { Nuoroda } iš "react-router-dom";
eksportuotinumatytasfunkcijaNerastas() {
grąžinti (
<div>
<h1>Oi! Atrodo, tu pasiklysti.</h1>
<p>Štai keletas naudingų nuorodų:</p>
<Nuoroda į ='/'>Namai</Link>
<Nuoroda į ='/blog'>Dienoraštis</Link>
<Nuoroda į ='/contact'>kontaktas</Link>
</div>
)
}
Šis 404 puslapis pateikia pranešimą ir nuorodas, kurios nukreipia vartotoją į įprastus svetainės puslapius.
Maršrutas į 404 puslapį
Galite sukurti įprastą maršrutą naudodami „React“ maršrutizatorių taip:
importuoti { Maršrutas, maršrutai } iš "react-router-dom";
funkcijaProgramėlė() {
grąžinti (
<Maršrutai>
<Maršruto kelias="/" element={ <Namai/> }/>
</Routes>
)
}
Nurodote URL kelią ir elementą, kurį norite pateikti tame maršrute.
404 puslapis rodomas keliuose, kurių svetainėje nėra. Taigi, užuot nurodyę kelią, naudokite žvaigždutę (*).
<Maršruto kelias='*' element={<Nerastas />}/>
Naudojant * pateikia „NotFound“ komponentą visiems maršrutuose nenurodytiems URL.
Maršrutas „React“.
Naudodami maršruto parinktuvą galite lengvai sukurti 404 puslapį visiems URL, kurių nėra jūsų React žiniatinklio programoje.
Naršyklėse yra numatytasis 404 puslapis, tačiau sukūrę pasirinktinį puslapį galite pasakyti vartotojams, kas nutiko ir kaip jie gali tai ištaisyti. Taip pat galite sukurti 404 puslapį, atitinkantį jūsų prekės ženklą.
