Isonjululwe: ukongeza iiparamitha kwi-url react router

Ingxaki ephambili enxulumene nokongeza iiparamitha kwi-URL React Router kukuba iiparameters zingenziwa lula ngabasebenzisi. Oku kunokukhokelela kwimicimbi yokhuseleko, njengoko abasebenzisi abakhohlakeleyo banokusebenzisa iiparamitha ukufumana ukufikelela kwimithombo engagunyaziswanga okanye idatha. Ukongeza, ukuba amaxabiso eparameter awaqinisekiswanga ngokufanelekileyo, kunokukhokelela ekuziphatheni okungalindelekanga kwisicelo. Okokugqibela, ukuba iiparamitha ezininzi zongeziweyo, zinokubangela imiba yokusebenza ngenxa yokuntsokotha okwandileyo kwe-URL.

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. ngenisa ngaphandle {I-BrowserRouter njengeNdlela, iNdlela, iNxulumano, sebenzisa iParams } ukusuka kwi-"react-router-dom";
// Oku kungenisa amacandelo kwilayibrari ye-react-router-dom eya kusetyenziswa kule khowudi.

2. // Oku kudala inxalenye ye-router eya kusingatha ukuhamba phakathi kweendlela ezahlukeneyo.

3. // Oku kudala indlela eneparameter eguqukayo 'yegama lomsebenzisi'.

4. // Oku kunika icandelo lomsebenzisi xa le ndlela idityanisiwe.

5. UJohn // Oku kudala ikhonkco kwi-/umsebenzisi/john indlela eya kwenza icandelo lomsebenzisi ngo 'john' njenge parameter yomsebenzisi xa ucofa.

6. umsebenzi Umsebenzisi () {// Eli licandelo elisebenzayo elithatha igama lomsebenzisi njengengxoxo kwaye linikezela ngaphakathi kweethegi ze div xa ebizwa ngokunqakraza kwiNqanaba elingentla kwayo .

7. vumela { igama lomsebenzisi } = useParams (); // Oku kusebenzisa ulwakhiwo ukufumana ufikelelo kwigama lomsebenzisi ukusuka kwiParams ().

8. buyela (

); //Le nto ibuyisela i-div element equlathe naliphi na ixabiso eligqithiselweyo kwigama lomsebenzisi elinokuthi kulo mzekelo 'john'.

Yintoni iReact router

I-React Router lithala leencwadi lendlela yosetyenziso lweReact. Inika amacandelo angundoqo kunye nemisebenzi eyimfuneko ukwenza isicelo sephepha elinye (i-SPA) kunye nokuhamba phakathi kwamaphepha ahlukeneyo. Ivumela abaphuhlisi ukuba bachaze iindlela, eziziindlela ezibonisa imephu kumacandelo athile kwisicelo. I-React Router ikwabonelela ngeempawu ezinjengokwalathiswa ngokutsha, uthelekiso lwendlela eguquguqukayo, kunye neeparamitha zemibuzo.

Iiparamitha kwi-URL

Iiparamitha kwi-URL kwiReact Router zivumela abaphuhlisi ukuba bagqithise idatha eguquguqukayo ukusuka kwi-URL ukuya kumacandelo e-React. Oku kuluncedo ekudaleni iindlela eziguquguqukayo ezinokuthi zisetyenziswe ukubonisa umxholo owahlukileyo ngokusekelwe kwiiparamitha ezigqithisiweyo kwi-URL. Umzekelo, indlela efana "/umsebenzisi/:id" ingasetyenziselwa ukubonisa iphepha leprofayile yomsebenzisi ngeparameter yesazisi egqithiswe kwi-URL. Iiparamitha zingasetyenziselwa ukuhluza idatha okanye eminye imisebenzi efuna idatha eguquguqukayo esuka kwi-URL.

Ndiyongeza njani ipharamitha kwi-URL kwiReact

Ukongeza iiparamitha kwi-URL kwi-React Router kwenziwa ngokusebenzisa into ethi "params". Le nto ikuvumela ukuba ugqithe ngababini bexabiso elingundoqo eliza kongezwa kwi-URL. Ukongeza iparameter, yongeza ngokulula kwinto yeparams ngolu hlobo:

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

Ke, xa usenza indlela yakho, ungadlula kwinto yeparams njengengxabano enje:

Iiparamitha ziya kongezwa kwi-URL xa usiya kule ndlela.