Yakagadziriswa: kuwedzera paramita kune url react router

Dambudziko guru rine chekuita nekuwedzera ma paramita kuURL React Router nderekuti ma paramita anogona kushandiswa nyore nyore nevashandisi. Izvi zvinogona kutungamira kune nyaya dzekuchengetedza, sezvo vashandisi vane hutsinye vangangokwanisa kushandisa ma paramita kuwana mukana kune zvisina mvumo zviwanikwa kana data. Pamusoro pezvo, kana iyo parameter tsika isina kunyatso simbiswa, inogona kutungamira kune isingatarisirwe maitiro mukushandisa. Chekupedzisira, kana maparameter akawandisa akawedzerwa, anogona kukonzera nyaya dzekuita nekuda kwekuwedzera kuoma kweiyo 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. pinza {Bhurawuza Router seRouter, Route, Link, useParams } kubva "react-router-dom";
// Izvi zvinopinza zvinhu kubva kune react-router-dom raibhurari iyo ichashandiswa mune iyi kodhi.

2. // Izvi zvinogadzira chikamu che router chinobata kufamba pakati penzira dzakasiyana.

3. // Izvi zvinogadzira nzira ine simba parameter ye 'username'.

4. // Izvi zvinopa iyo Mushandisi chikamu kana nzira iyi yafananidzwa.

5. John // Izvi zvinogadzira chinongedzo kune / mushandisi/john nzira iyo ichapa iyo Mushandisi chikamu ne 'john' sezita rezita rezita kana wadzvanywa.

6

7. rega { username } = useParams(); // Izvi zvinoshandisa destructuring kuwana mukana wezita rekushandisa kubva kushandisaParams().

8. kudzokera (

{zita rekushandisa}

); //Izvi zvinodzosa div element ine chero kukosha kwakapfuudzwa muzita rekushandisa iro mune ino kesi raizova 'john'.

Chii chinonzi React router

React Router iraibhurari yenzira yeReact application. Inopa iyo yakakosha zvikamu uye mabasa anodiwa kugadzira imwe-peji application (SPA) ine kufamba pakati pemapeji akasiyana. Inobvumira vanogadzira kutsanangura nzira, idzo nzira dzinoita mepu kune dzakanangana zvikamu mukushandisa. React Router inopawo maficha akadai seredirection, inochinja nzira yekufananidza, uye query paramita.

Parameters kune URL

Paramita kuURL muReact Router inobvumira vanogadzira kupfuudza data rine simba kubva kuURL kuenda kuReact components. Izvi zvinobatsira pakugadzira nzira dzine simba dzinogona kushandiswa kuratidza zvakasiyana zvemukati zvichienderana nemaparamita anopfuudzwa muURL. Semuenzaniso, nzira yakaita se "/ mushandisi/:id" inogona kushandiswa kuratidza peji remushandisi ine id parameter yakapfuura muURL. Maparamita anogona zvakare kushandiswa kusefa data kana mamwe mavhisi anoda dhata ine simba kubva kuURL.

Ini ndinowedzera sei parameter kune URL muReact

Kuwedzera paramita kuURL muReact Router kunoitwa uchishandisa "params" chinhu. Ichi chinhu chinokutendera kuti upfuure mukiyi-kukosha mapeya anozowedzerwa kuURL. Kuti uwedzere parameter, ingoiwedzera kune chinhu cheparam senge:

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

Zvino, kana uchigadzira nzira yako, unogona kupfuura muparams chinhu senharo senge:

Maparamita anozowedzerwa kuURL kana uchienda nenzira iyi.

Related posts:

Leave a Comment