Inkinga enkulu ehlobene namapharamu e-React Router URL ukuthi angaba nzima ukuwasebenzisa emizileni eguquguqukayo. Lokhu kungenxa yokuthi amapharamitha e-URL amile futhi awakwazi ukushintshwa ngemva kokuthi umzila usudaliwe. Lokhu kusho ukuthi uma umsebenzisi edinga ukufinyelela ikhasi elihlukile elinamapharamitha ahlukene, uzodinga ukudala umzila omusha wenhlanganisela ngayinye yepharamitha. Ukwengeza, uma usebenzisa amapharamitha e-URL, kungase kube nzima ukulandelela zonke izinhlanganisela ezingaba khona futhi uqiniseke ukuthi ngayinye iphathwa ngendlela efanele umzila.
import {
BrowserRouter as Router,
Route,
Link,
useParams
} from "react-router-dom";
const App = () => {
return (
<Router>
<div>
<Route path="/user/:username" component={UserPage} />
</div>
</Router>
);
};
const UserPage = () => {
let { username } = useParams(); // Get the username from the URL.
return (
<div>Hello, {username}!</div> // Render a greeting with the username.
);
};
Le khodi imisa i-React Router ukuze inikeze ikhasi elinegama lomsebenzisi elisuka ku-URL.
1. Umugqa wokuqala ungenisa izingxenye ezivela kulabhulali ye-React Router DOM.
2. Umsebenzi Wohlelo Lokusebenza ubuyisela ingxenye Yomzila nengxenye Yomzila ngaphakathi kwayo, ecacisa ukuthi noma iyiphi i-URL eqala ngokuthi “/umsebenzisi/” kufanele inikeze ingxenye ye-UserPage.
3. Umsebenzi we-UserPage usebenzisa useParams() ukuze uthole igama lomsebenzisi ku-URL bese wenza ukubingelela usebenzisa lelo gama lomsebenzisi.
Imingcele ye-URL
Amapharamitha e-URL ku-React Router ayizingcezu zedatha ezidluliselwa emzileni njengengxenye ye-URL. Ivumela onjiniyela ukuthi badlulisele ulwazi oluguquguqukayo emzileni, njenge-ID noma iyunithi yezinhlamvu yombuzo. Lokhu kungasetshenziselwa ukudala imizila eguquguqukayo engasetshenziselwa izinto ezifana nokubonisa izinto ezithile kusizindalwazi noma ukuhlunga okuqukethwe ngokusekelwe kokokufaka komsebenzisi. I-React Router ihlinzeka ngamathuluzi okufinyelela kanye nokukhohlisa amapharamitha e-URL, okwenza kube lula ukuwasebenzisa kuhlelo lwakho lokusebenza.
Uwathola kanjani amapharamitha e-URL emzileni oku-React
Ku-React Router, ungafinyelela amapharamitha e-URL emzileni usebenzisa i-useParams hook. Le hook ibuyisela into equkethe amapheya enani elingukhiye lamapharamitha e-URL. Isibonelo, uma umzila wakho ungu/user/:id, ungafinyelela ipharamitha ye-id nge useParams().id.
