Tādi lasītāji kā jūs palīdz atbalstīt MUO. Veicot pirkumu, izmantojot saites mūsu vietnē, mēs varam nopelnīt filiāles komisiju.
Izveidojiet pielāgotu 404 lapu, izmantojot vienkāršu React maršrutu, lai sniegtu apmeklētājiem noderīgu pieredzi, kad viņiem tas visvairāk nepieciešams.
Agrāk vai vēlāk lietotājs apmeklēs URL, kas jūsu vietnē nepastāv. Tas, ko lietotājs darīs pēc tam, ir atkarīgs no jums.
Viņi var nospiest pogu Atpakaļ un atstāt jūsu vietni. Tā vietā varat nodrošināt noderīgu 404. lapu, lai palīdzētu viņiem turpināt pārvietoties uz jūsu vietni.
React vietnēm varat izmantot React maršrutētāju, lai izveidotu noderīgu 404 nav atrasta lapa.
404 lapas izveide
The 404 kļūda notiek, mēģinot apmeklēt vietnes lapu, kuru serveris nevar atrast. Kā izstrādātājam 404 kļūdu apstrāde nozīmē lapas izveidi, ko serveris izmanto kā aizstājēju, ja tas nevar atrast pieprasīto lapu.
Programmā React jūs to darāt, izveidojot neatrastu komponentu, kas tiks renderēts maršrutos, kas neeksistē.
Šajā rakstā tiek pieņemts, ka jums jau ir darbojas React lietojumprogramma ar iestatītu maršrutēšanu. Ja nē, izveidot React lietojumprogrammu un pēc tam instalējiet Reaģēt maršrutētāju.
Izveidojiet jaunu failu NotFound.js un pievienojiet šādu kodu, lai izveidotu 404 lapu.
imports { Saite } no "react-router-dom";
eksportētnoklusējumafunkcijuNav atrasts() {
atgriezties (
<div>
<h1>Hmm! Šķiet, ka esat apmaldījies.</h1>
<lpp>Šeit ir dažas noderīgas saites:</lpp>
<Saite uz ='/'>Mājas</Link>
<Saite uz ='/blog'>Emuārs</Link>
<Saite uz ='/contact'>Sazināties</Link>
</div>
)
}
Šī 404 lapa atveido ziņojumu un saites, lai novirzītu lietotāju uz bieži sastopamām vietnes lapām.
Maršrutēšana uz 404 lapu
Varat izveidot parastu maršrutu, izmantojot React maršrutētāju, piemēram:
imports { Maršruts, maršruti } no "react-router-dom";
funkcijuApp() {
atgriezties (
<Maršruti>
<Maršruta ceļš="/" elements={ <Mājas/> }/>
</Routes>
)
}
Jūs norādāt URL ceļu un elementu, kuru vēlaties renderēt šajā maršrutā.
404. lapa tiek parādīta ceļiem, kas vietnē nepastāv. Tā vietā, lai norādītu ceļu, izmantojiet zvaigznīti (*).
<Maršruta ceļš='*' elements={<Nav atrasts />}/>
Izmantojot * atveido komponentu NotFound visiem URL, kas nav norādīti maršrutos.
Maršrutēšana programmā React
Izmantojot maršrutētāju, varat viegli izveidot 404 lapu visiem vietrāžiem URL, kas neeksistē jūsu React tīmekļa lietotnē.
Pārlūkprogrammām ir noklusējuma 404. lapa, taču, izveidojot pielāgotu lapu, varat pastāstīt lietotājiem, kas radās nepareizi un kā to var novērst. Varat arī izveidot 404. lapu, kas atbilst jūsu zīmolam.