Solved: react router url params

Ang pangunahing problema na nauugnay sa mga param ng URL ng React Router ay maaaring mahirap gamitin ang mga ito sa mga dynamic na ruta. Ito ay dahil ang mga param ng URL ay static at hindi na mababago pagkatapos magawa ang ruta. Nangangahulugan ito na kung kailangan ng user na mag-access ng ibang page na may iba't ibang parameter, kakailanganin nilang gumawa ng bagong ruta para sa bawat kumbinasyon ng parameter. Bukod pa rito, kapag gumagamit ng mga param ng URL, maaaring mahirap subaybayan ang lahat ng posibleng kumbinasyon at tiyaking maayos na pinangangasiwaan ng router ang bawat isa.

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

 const App = () => {

   return (
     <Router>
       <div>

         <Route path="/user/:username" component={UserPage} />

       </div>
     </Router>
   );

 };

 const UserPage = () => {

   let { username } = useParams(); // Get the username from the URL.

   return (
     <div>Hello, {username}!</div> // Render a greeting with the username. 
   );

 };

Ang code na ito ay nagse-set up ng React Router para mag-render ng page na may username mula sa URL.

1. Ang unang linya ay nag-i-import ng mga bahagi mula sa React Router DOM library.
2. Ibinabalik ng App function ang Router component na may bahaging Route sa loob nito, na tumutukoy na ang anumang URL na nagsisimula sa “/user/” ay dapat mag-render ng UserPage component.
3. Gumagamit ang UserPage function ng useParams() upang makuha ang username mula sa URL at pagkatapos ay mag-render ng pagbati gamit ang username na iyon.

URL params

Ang mga param ng URL sa React Router ay mga piraso ng data na ipinapasa sa isang ruta bilang bahagi ng URL. Pinapayagan nila ang mga developer na magpasa ng dynamic na impormasyon sa isang ruta, gaya ng ID o string ng query. Magagamit ito upang lumikha ng mga dynamic na ruta na maaaring magamit para sa mga bagay tulad ng pagpapakita ng mga partikular na item mula sa isang database o pag-filter ng nilalaman batay sa input ng user. Nagbibigay ang React Router ng mga tool para sa pag-access at pagmamanipula ng mga param ng URL, na ginagawang madali itong gamitin sa iyong application.

Paano mo makukuha ang mga param ng URL mula sa isang ruta sa React

Sa React Router, maa-access mo ang URL params mula sa isang ruta gamit ang useParams hook. Ang hook na ito ay nagbabalik ng isang bagay na naglalaman ng mga pares ng key-value ng mga parameter ng URL. Halimbawa, kung ang iyong ruta ay /user/:id, maa-access mo ang parameter ng id gamit ang useParams().id.

Kaugnay na mga post:

Mag-iwan ng komento