Isonjululwe: iphepha lokulayisha kwakhona i-router alifunyenwanga

Ingxaki enkulu enxulumene kwiphepha lokulayishwa kwakhona kwe-React Router ayifumanekanga kukuba xa umsebenzisi ehlaziya iphepha, isikhangeli siya kuzama ukwenza isicelo kumncedisi we-URL yangoku. Nangona kunjalo, ukusukela ukuba iReact Router yindlela yecala lomxhasi, akukho ndlela ihambelanayo yomncedisi ye URL kwaye ke impazamo ye-404 Ayifunyenwanga ibuyiswe. Oku kunokuba yingxaki ngakumbi ukuba abasebenzisi balindele ukuba umxholo othile ubonakale ekuhlaziyeni.

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />

      {/* Page Not Found */}
      <Route render={() => (<h1>Page not found</h1>)} />

    </Switch>
  </Router>  
);

// Umgca 1: Lo mgca ungenisa ngaphandle i-BrowserRouter, Route, kunye noTshintsho kwilayibrari ye-react-router-dom.

// Umgca 3: Lo mgca uchaza umsebenzi obizwa ngokuba yi-App ebuyisela ikhowudi ye-JSX.

// Umgca 5: Lo mgca ugoqa yonke ikhowudi ye-JSX kwi-Router component kwi-react-router-dom.

// Umgca 6: Lo mgca uvala zonke iindlela kwi-switch component kwi-react-router-dom.

// Imigca yesi-7 – 9: Le migca ichaza iindlela ezimbini ze-'/' kunye '/ malunga' ngokulandelelanayo kunye namacandelo azo (eKhaya kunye ne-Mayelana).

// Imigca 11 – 12: Le migca ichaza indlela xa kungekho ezinye iindlela ezihambelanayo, nto leyo eyenza i-h1 ithegi ithi “Iphepha alifunyanwanga”.

Iphepha alifunyenwanga mpazamo

Iphepha alifunyenwanga mpazamo kwiReact Router yimpazamo eyenzekayo xa umsebenzisi ezama ukufikelela kwiphepha okanye indlela engekhoyo. Oku kunokwenzeka ukuba umsebenzisi uyichwetheze kakubi i-URL, okanye ukuba iphepha abazama ukufikelela kulo lisusiwe okanye lisusiwe. KwiReact Router, le mpazamo iphathwa ngokusebenzisa i unikezelo lweprop kunye nogqithiso kumsebenzi obuyisela iphepha lama-404. Oku kuvumela abaphuhlisi ukuba benze amaphepha e-404 amasiko kunye naluphi na umxholo abawufunayo, njengamakhonkco aluncedo okanye umyalezo woxolo.

Ndiliphatha njani iPhepha elingafumanekiyo kwi-react router

Xa usebenzisa iReact Router, ungaphatha iphepha elingafunyanwanga ngokudala indlela yesiko eyakwenza icandelo le-NotFound xa i-URL ingangqamani nayo nayiphi na indlela ekhoyo. Ukwenza oku, kufuneka udale indlela entsha kunye nendlela ebekwe kwi "*" kwaye unikeze icandelo lakho le-NotFound.

Umzekelo:

} />

Oku kuya kuhambelana nayo nayiphi na i-URL esele ithelekiswe yindlela esele ikho kwaye inike icandelo lakho le-NotFound.

Ndilinyanzela njani iphepha eliphendulayo ukuba lilayishe kwakhona

Kwi-React Router, unokunyanzela iphepha ukuba lilayishe kwakhona ngokusebenzisa indlela yokubuyisela kwinto yembali. Oku kuya kuthatha indawo yongeno lwangoku kwisitaki sembali ngesinye esitsha, ngaloo ndlela kunyanzelwa ukulayishwa kwakhona kwephepha. Ukusebenzisa le ndlela, kufuneka uqale ufumane ukufikelela kwinto yembali. Unokwenza oku ngokudlula njengeprop xa usenza icandelo le-router yakho:

const AppRouter = () => (

{/* Indlela yakho apha */}

);

Nje ukuba unofikelelo kwinto yembali, ungasebenzisa indlela yayo yokubuyisela ngolu hlobo:

imbali.replace('/enye-indlela');