La xaliyay: ku darida cabbirada url react router

Dhibaatada ugu weyn ee la xiriirta ku darista cabbirada URL React Router waa in cabbirada ay si fudud u maamuli karaan isticmaalayaasha. Tani waxay u horseedi kartaa arrimo amni, maadaama isticmaalayaasha xaasidnimada leh ay suurtogal u tahay inay isticmaalaan cabbirada si ay u helaan ilo ama xog aan la ogalayn. Intaa waxaa dheer, haddii qiyamka halbeegyada aan si sax ah loo ansixin, waxay u horseedi kartaa dabeecad lama filaan ah codsiga. Ugu dambeyntii, haddii cabbirro badan lagu daro, waxay sababi kartaa arrimo waxqabad sababtoo ah kakanaanta URL-ka oo kordhay.

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

 <Router>
    <Route path="/user/:username">
      <User />
    </Route>

    <Link to="/user/john">John</Link>

    function User() {
      let { username } = useParams();

      return (
        <div>{username}</div>   // renders 'john' when the link is clicked. 
      );  
    }    

 </Router>

1. ka soo daji {BrowserRouter sida Router, Route, Link, useParams} ka "react-router-dom";
// Tani waxay ka keenaysaa qaybaha maktabadda react-router-dom ee loo isticmaali doono koodkan.

2. // Tani waxay abuurtaa qayb ka mid ah router kaas oo qaban doona navigation inta u dhaxaysa waddooyinka kala duwan.

3. // Tani waxay abuurtaa waddo leh cabbir firfircoon oo 'username'.

4. // Tani waxay ka dhigaysaa qaybta Isticmaalaha marka jidkan la isku beego.

5. John // Tani waxay abuurtaa isku xirka /user/john dariiqa kaas oo ka dhigi doona qaybta Isticmaalaha 'john' sida halbeegga isticmaale marka la gujiyo.

6. function User() {//Kani waa qayb shaqaynaysa oo u qaadanaysa username ahaan dood ahaan oo ka dhigaysa gudaha div tags marka loo yeedho adigoo gujinaya Linkiga ka sarreeya.

7. u daa {username} = useParams(); // Tani waxay isticmaashaa burburinta si ay u gasho magaca isticmaalaha isticmaalkaParams().

8. soo noqo (

; // Tani waxay soo celinaysaa qayb div ah oo ay ku jiraan wax kasta oo qiime ah oo loo gudbiyay magaca isticmaalaha kaas oo kiiskan noqon doona 'john'.

Waa maxay React router

React Router waa laybareeriga dajinta codsiyada React. Waxay bixisaa qaybaha asaasiga ah iyo hawlaha lagama maarmaanka u ah in la abuuro codsi hal bog ah (SPA) oo leh marin u dhexeeya bogag kala duwan. Waxay u ogolaataa horumariyeyaasha inay qeexaan waddooyinka, kuwaas oo ah waddooyin khariidad u leh qaybo gaar ah oo codsiga ah. React Router waxa kale oo uu bixiyaa sifooyin ay ka mid yihiin jihaynta, isbarbardhigga dariiqa firfircoon, iyo cabbirrada weydiinta.

Qiyaasta URL

Halbeegyada URL ee React Router waxay u ogolaataa horumariyayaasha inay ka gudbiyaan xogta firfircoon ee URL-ka qaybaha falcelinta. Tani waxay faa'iido u leedahay abuurista wadooyin firfircoon oo loo isticmaali karo soo bandhigida waxyaabo kala duwan oo ku salaysan cabbirada lagu gudbiyay URL. Tusaale ahaan, dariiqa sida "/user/:id" waxa loo isticmaali karaa in lagu muujiyo bogga astaanta isticmaalaha oo leh halbeeg id oo lagu dhex gudbiyay URL. Halbeegyada waxa kale oo loo isticmaali karaa shaandhaynta xogta ama hawlgallada kale ee u baahan xog firfircoon oo URL ah.

Sideen ugu daraa halbeegyada URL ee React

Ku darista cabbirada URL gudaha React Router waxaa lagu sameeyaa iyadoo la adeegsanayo shayga "params". Shaygani wuxuu kuu ogolaanayaa inaad ku gudubto lamaane-qiimo-muhiim ah kuwaas oo lagu dari doono URL. Si aad ugu darto halbeeg, si fudud ugu dar shayga params sida:

const params = {param1: 'value1', param2: 'value2'};

Kadib, marka aad abuureyso jidkaaga, waxaad ku dhex mari kartaa shayga params sida dood sidan oo kale ah:

Halbeegyada ayaa markaa lagu dari doonaa URL-ka marka loo socdo jidkan.