Kuxazululiwe: ukwengeza amapharamitha kumzila we-url react

Inkinga enkulu ehlobene nokwengeza amapharamitha ku-URL React Router ukuthi amapharamitha angasetshenziswa kalula ngabasebenzisi. Lokhu kungaholela ezinkingeni zokuphepha, njengoba abasebenzisi abanonya bangase basebenzise imingcele ukuze bathole ukufinyelela kuzinsiza ezingagunyaziwe noma idatha. Ukwengeza, uma amanani epharamitha engaqinisekisiwe kahle, angaholela ekuziphatheni okungalindelekile kuhlelo lokusebenza. Okokugcina, uma amapharamitha amaningi engeziwe, angabangela izinkinga zokusebenza ngenxa yokwanda kwenkimbinkimbi ye-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 i-{ BrowserRouter as Router, Route, Link, useParams } isuka “ku-react-router-dom”;
// Lokhu kungenisa izingxenye kusuka kulabhulali ye-react-router-dom ezosetshenziswa kule khodi.

2. // Lokhu kudala ingxenye yerutha ezophatha ukuzulazula phakathi kwemizila ehlukene.

3. // Lokhu kudala umzila onepharamitha eguquguqukayo 'yegama lomsebenzisi'.

4. // Lokhu kunikeza ingxenye yomsebenzisi uma lo mzila ufaniswe.

5. UJohn // Lokhu kudala isixhumanisi kumzila /umsebenzisi/john ozonikeza ingxenye yomsebenzisi ngokuthi 'john' njengepharamitha yegama lomsebenzisi uma uchofozwa.

6. function User() {//Lesi ingxenye esebenzayo ethatha igama lomsebenzisi njenge-agumenti futhi ilinikeze ngaphakathi kwamathegi e-div uma ibizwa ngokuchofoza Isixhumanisi esingenhla kwayo .

7. vumela { igama lomsebenzisi } = useParams(); //Lokhu kusebenzisa ukwakheka ukuze uthole ukufinyelela kugama lomsebenzisi kusuka ku-useParams().

8. buya (

); //Lokhu kubuyisela i-elementi ye-div equkethe noma yiliphi inani elidluliselwe egameni lomsebenzisi lapho kulokhu kuzoba 'john'.

Iyini irutha ye-React

I-React Router iwumtapo womzila wezinhlelo zokusebenza ze-React. Ihlinzeka ngezingxenye ezibalulekile nemisebenzi edingekayo ukuze udale uhlelo lokusebenza lwekhasi elilodwa (i-SPA) ngokuzulazula phakathi kwamakhasi ahlukene. Ivumela onjiniyela ukuthi bachaze imizila, okuyimizila ekhomba izingxenye ezithile kuhlelo lokusebenza. I-React Router iphinde inikeze izici ezinjengokuqondisa kabusha, ukufanisa umzila oguqukayo, namapharamitha wemibuzo.

Amapharamitha ku-URL

Amapharamitha aya ku-URL Kumzila We-React avumela onjiniyela ukuthi badlulise idatha eguquguqukayo isuka ku-URL iye ezingxenyeni ze-React. Lokhu kuyasiza ekudaleni imizila eguquguqukayo engasetshenziswa ekuboniseni okuqukethwe okuhlukile ngokusekelwe kumingcele ephasiswe ku-URL. Isibonelo, umzila ofana nokuthi “/user/:id” ungasetshenziswa ukubonisa ikhasi lephrofayela yomsebenzisi elinepharamitha ye-id ephasiswe ku-URL. Amapharamitha angaphinda asetshenziselwe ukuhlunga idatha noma eminye imisebenzi edinga idatha eguquguqukayo evela ku-URL.

Ngiyengeza kanjani ipharamitha ku-URL ku-React

Ukwengeza amapharamitha ku-URL ku-React Router kwenziwa kusetshenziswa into ethi “params”. Le nto ikuvumela ukuthi udlule ngamapheya enani elingukhiye azokwengezwa ku-URL. Ukwengeza ipharamitha, vele uyengeze entweni yamapharamitha kanje:

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

Khona-ke, lapho udala umzila wakho, ungadlula entweni ye-params njengengxabano enjengale:

Amapharamitha azobese engezwa ku-URL uma uzulazulela kulo mzila.