Kuxazululiwe: ikhasi lokulayisha kabusha irutha alitholakali

Inkinga enkulu ehlobene nekhasi lokulayisha kabusha i-React Router ayitholakali ukuthi uma umsebenzisi evuselela ikhasi, isiphequluli sizozama ukwenza isicelo kuseva se-URL yamanje. Nokho, njengoba i-React Router iwumzila oseceleni kweklayenti, awukho umzila weseva ohambisanayo we-URL futhi ngaleyo ndlela kubuyiselwa iphutha elithi 404 Not Found. Lokhu kungaba yinkinga ikakhulukazi uma abasebenzisi belindele ukuthi okuqukethwe okuthile kuvele ekuvuseleleni.

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>  
);

// Umugqa 1: Lo mugqa ungenisa kwamanye amazwe izingxenye ze-BrowserRouter, Route, kanye ne-Switch kusuka kumtapo wezincwadi we-react-router-dom.

// Umugqa wesi-3: Lo mugqa uchaza umsebenzi obizwa nge-App obuyisela ikhodi ye-JSX.

// Umugqa wesi-5: Lo mugqa ugoqa yonke ikhodi ye-JSX engxenyeni yomzila ukusuka ku-react-router-dom.

// Umugqa wesi-6: Lo mugqa ugoqa yonke imizila engxenyeni ye-Shintsha ukusuka ku-react-router-dom.

// Imigqa yesi-7 โ€“ 9: Le migqa ichaza imizila emibili ye-'/' kanye '/mayelana' ngokulandelana nezingxenye zayo (Ekhaya kanye Nethi Mayelana).

// Imigqa 11 โ€“ 12: Le migqa ichaza umzila lapho ingekho eminye imizila emeshayo, okunikeza umaka we-h1 othi โ€œIkhasi alitholakaliโ€.

Ikhasi alitholakalanga iphutha

Iphutha lekhasi elingatholakali ku-React Router iphutha elenzeka uma umsebenzisi ezama ukufinyelela ikhasi noma umzila ongekho. Lokhu kungenzeka uma umsebenzisi engabhalanga kahle i-URL, noma uma ikhasi azama ukufinyelela kulo lisusiwe noma lisusiwe. Ku-React Router, leli phutha lisingathwa kusetshenziswa i- i-render prop kanye nokudlulisa kumsebenzi obuyisela ikhasi lama-404. Lokhu kuvumela abathuthukisi ukuthi bakhe amakhasi angu-404 angokwezifiso nganoma yikuphi okuqukethwe abakufunayo, njengezixhumanisi eziwusizo noma umlayezo wokuxolisa.

Ngiliphatha kanjani Ikhasi elingatholakali Ku-router ye-react

Uma usebenzisa i-React Router, ungakwazi ukuphatha ikhasi elingatholakali ngokudala umzila wangokwezifiso ozonikeza ingxenye ye-NotFound uma i-URL ingafani nanoma yimiphi imizila ekhona. Ukuze wenze lokhu, udinga ukwakha umzila omusha ngendlela esethelwe ku-โ€œ*โ€ futhi unikeze ingxenye yakho ye-NotFound.

Ngokwesibonelo:

} />

Lokhu kuzofana nanoma iyiphi i-URL engakafaniswa nomzila okhona kakade futhi kunikeze ingxenye yakho ye-NotFound.

Ngiliphoqa kanjani ikhasi elisabelayo ukuthi lilayishe kabusha

Ku-React Router, ungaphoqa ikhasi ukuthi lilayishe kabusha ngokusebenzisa indlela yokufaka esikhundleni sento yomlando. Lokhu kuzoshintsha okufakiwe kwamanje kusitaki somlando kufake okusha, ngaleyo ndlela kuphoqe ukulayishwa kabusha kwekhasi. Ukuze usebenzise le ndlela, udinga ukuthola ukufinyelela entweni yomlando. Ungakwenza lokhu ngokukudlulisa njenge-prop lapho udala ingxenye yerutha yakho:

Const AppRouter = () => (

{/* Imizila yakho lapha */}

);

Uma usukwazi ukufinyelela entweni yomlando, ungasebenzisa indlela yayo yokufaka esikhundleni kanje:

umlando.replace('/some-route');

Okuthunyelwe okuhlobene:

Shiya amazwana