Nalutas: pagdaragdag ng mga parameter sa url react router

Ang pangunahing problema na nauugnay sa pagdaragdag ng mga parameter sa URL React Router ay ang mga parameter ay madaling manipulahin ng mga user. Maaari itong humantong sa mga isyu sa seguridad, dahil ang mga nakakahamak na user ay maaaring gumamit ng mga parameter upang makakuha ng access sa mga hindi awtorisadong mapagkukunan o data. Bukod pa rito, kung hindi wastong na-validate ang mga value ng parameter, maaari itong humantong sa hindi inaasahang gawi sa application. Panghuli, kung masyadong maraming mga parameter ang idinagdag, maaari itong magdulot ng mga isyu sa pagganap dahil sa tumaas na pagiging kumplikado ng 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. i-import ang { BrowserRouter bilang Router, Route, Link, useParams } mula sa "react-router-dom";
// Ini-import nito ang mga bahagi mula sa library ng react-router-dom na gagamitin sa code na ito.

2. // Lumilikha ito ng bahagi ng router na hahawak sa nabigasyon sa pagitan ng iba't ibang ruta.

3. // Lumilikha ito ng ruta na may dynamic na parameter ng 'username'.

4. // Ito ay nagre-render ng User component kapag ang rutang ito ay naitugma.

5. John // Lumilikha ito ng link sa rutang /user/john na magre-render sa component ng User na may 'john' bilang parameter ng username kapag na-click.

6. function User() { //Ito ay isang functional component na kumukuha ng username bilang argumento at ginagawa ito sa loob ng mga div tag kapag tinawag sa pamamagitan ng pag-click sa Link sa itaas nito .

7. let { username } = useParams(); //Gumagamit ito ng destructuring upang makakuha ng access sa username mula sa useParams().

8. bumalik (

); //Ito ay nagbabalik ng div element na naglalaman ng anumang halaga na naipasa sa username na sa kasong ito ay magiging 'john'.

Ano ang React router

Ang React Router ay isang library sa pagruruta para sa mga application ng React. Nagbibigay ito ng mga pangunahing bahagi at function na kinakailangan upang lumikha ng isang solong-pahinang application (SPA) na may nabigasyon sa pagitan ng iba't ibang mga pahina. Nagbibigay-daan ito sa mga developer na tukuyin ang mga ruta, na mga path na nagmamapa sa mga partikular na bahagi sa application. Nagbibigay din ang React Router ng mga tampok tulad ng mga pag-redirect, pagtutugma ng dynamic na ruta, at mga parameter ng query.

Mga parameter sa URL

Ang mga parameter sa URL sa React Router ay nagbibigay-daan sa mga developer na magpasa ng dynamic na data mula sa URL patungo sa mga bahagi ng React. Ito ay kapaki-pakinabang para sa paglikha ng mga dynamic na ruta na maaaring magamit para sa pagpapakita ng iba't ibang nilalaman batay sa mga parameter na ipinasa sa URL. Halimbawa, maaaring gumamit ng ruta tulad ng “/user/:id” upang magpakita ng page ng profile ng user na may parameter ng id na ipinasa sa URL. Magagamit din ang mga parameter para sa pag-filter ng data o iba pang mga operasyon na nangangailangan ng dynamic na data mula sa URL.

Paano ako magdagdag ng parameter sa isang URL sa React

Ang pagdaragdag ng mga parameter sa isang URL sa React Router ay ginagawa gamit ang object na "params". Binibigyang-daan ka ng object na ito na makapasa sa mga pares ng key-value na idaragdag sa URL. Upang magdagdag ng isang parameter, idagdag lamang ito sa params object tulad nito:

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

Pagkatapos, kapag lumilikha ng iyong ruta, maaari mong ipasa ang params object bilang isang argumento tulad nito:

Ang mga parameter ay idaragdag sa URL kapag nagna-navigate sa rutang ito.