Ingxaki ephambili enxulumene ne-React Router URL params kukuba kunokuba nzima ukuyisebenzisa kwiindlela eziguquguqukayo. Oku kungenxa yokuba iiparams ze-URL zimile kwaye azinakutshintshwa emva kokuba indlela yenziwe. Oku kuthetha ukuba ukuba umsebenzisi ufuna ukufikelela kwiphepha elahlukileyo elineeparamitha ezahlukeneyo, kuya kufuneka benze indlela entsha yokudibanisa ipharamitha nganye. Ukongezelela, xa usebenzisa iiparam ze-URL, kunokuba nzima ukugcina umkhondo wazo zonke iindibaniselwano ezinokwenzeka kwaye uqinisekise ukuba nganye nganye iphathwa ngokufanelekileyo yi-router.
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 khowudi imisela iReact Router ukuze inike iphepha ngegama lomsebenzisi elisuka kwi-URL.
1. Umgca wokuqala ungenisa amacandelo kwilayibrari yeReact Router DOM.
2. Umsebenzi we-App ubuyisela icandelo le-Router kunye necandelo leNdlela ngaphakathi kuyo, echaza ukuba nayiphi na i-URL eqala ngo "/umsebenzisi/" kufuneka inike icandelo le-UserPage.
3. Umsebenzi wePage lomsebenzisi usebenzisa useParams() ukufumana igama lomsebenzisi kwi-URL kwaye emva koko unike umbuliso usebenzisa elo gama lomsebenzisi.
URL params
Iiparam ze-URL kwiReact Router ngamaqhekeza edatha agqithiselwe kwindlela njengenxalenye ye-URL. Bavumela abaphuhlisi ukuba bagqithise ulwazi oluguquguqukayo kwindlela, njenge-ID okanye umtya wombuzo. Oku kungasetyenziselwa ukwenza iindlela eziguquguqukayo ezingasetyenziselwa izinto ezifana nokubonisa izinto ezithile kwisiseko sedatha okanye umxholo wokucoca ngokusekelwe kwigalelo lomsebenzisi. I-React Router ibonelela ngezixhobo zokufikelela kunye nokukhohlisa iiparam ze-URL, ikwenza kube lula ukuzisebenzisa kwisicelo sakho.
Uzifumana njani iiparam ze-URL kwindlela e-React
Kwi-React Router, unokufikelela kwiiparams ze-URL ukusuka kwindlela usebenzisa i-useParams hook. Le hook ibuyisela into equlathe isitshixo-ixabiso lezibini zeeparamitha ze-URL. Umzekelo, ukuba indlela yakho ngu/user/:id, ungafikelela kwi id parameter usebenzisa useParams().id.
