Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion.
Luo mukautettu 404-sivu käyttämällä yksinkertaista React-reittiä, jotta kävijät saavat hyödyllisen kokemuksen silloin, kun he sitä eniten tarvitsevat.
Ennemmin tai myöhemmin käyttäjä vierailee URL-osoitteessa, jota ei ole verkkosivustollasi. Se, mitä käyttäjä tekee tämän jälkeen, on sinun.
He saattavat painaa Takaisin-painiketta ja poistua sivustoltasi. Sen sijaan voit tarjota hyödyllisen 404-sivun, joka auttaa heitä jatkamaan siirtymistä verkkosivustollesi.
React-verkkosivustoille voit käyttää React-reititintä hyödyllisen 404 ei löydy -sivun luomiseen.
404-sivun luominen
The 404 virhe tapahtuu, kun yrität vierailla verkkosivuston sivulla, jota palvelin ei löydä. Kehittäjänä 404-virheiden käsittely tarkoittaa sivun luomista, jota palvelin käyttää korvaavana sivuna, kun se ei löydä pyydettyä sivua.
Reactissa teet tämän luomalla ei löydy -komponentin, joka hahmonnetaan reiteillä, joita ei ole olemassa.
Tässä artikkelissa oletetaan, että sinulla on jo toimiva React-sovellus, jossa reititys on määritetty. Jos et, luo React-sovellus ja asenna sitten React Router.
Luo uusi tiedosto nimeltä NotFound.js ja lisää seuraava koodi 404-sivun luomiseksi.
tuonti { Linkki } alkaen "react-router-dom";
viedäoletuksenatoimintoEi löydetty() {
palata (
<div>
<h1>Oho! Näytät olevan hukassa.</h1>
<s>Tässä muutamia hyödyllisiä linkkejä:</s>
<Linkki ='/'>Koti</Link>
<Linkki ='/blog'>Blogi</Link>
<Linkki ='/contact'>Ottaa yhteyttä</Link>
</div>
)
}
Tämä 404-sivu näyttää viestin ja linkit, jotka ohjaavat käyttäjän verkkosivuston yleisille sivuille.
Reititys 404-sivulle
Voit luoda normaalin reitin React-reitittimellä seuraavasti:
tuonti { Reitti, reitit } alkaen "react-router-dom";
toimintoSovellus() {
palata (
<Reitit>
<Reittipolku="/" element={ <Koti/> }/>
</Routes>
)
}
Määrität URL-polun ja elementin, jonka haluat hahmontaa kyseisellä reitillä.
404-sivu näyttää polut, joita ei ole verkkosivustolla. Käytä siis polun määrittämisen sijaan tähteä (*).
<Reittipolku='*' element={<Ei löydetty />}/>
Käyttämällä * tekee NotFound-komponentin kaikille URL-osoitteille, joita ei ole määritetty reiteissä.
Reititys Reactissa
Voit helposti luoda 404-sivun kaikille URL-osoitteille, joita ei ole React-verkkosovelluksessasi reitittimen avulla.
Selaimissa on oletusarvoinen 404-sivu, mutta luomalla mukautetun sivun voit kertoa käyttäjillesi, mikä meni pieleen ja kuinka he voivat korjata sen. Voit myös luoda 404-sivun, joka sopii brändiisi.
