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