Ang pangunahing problema na nauugnay sa pagkuha ng query mula sa URL React Router DOM v6 ay hindi ito nagbibigay ng built-in na paraan upang ma-access ang mga parameter ng query. Sa halip, dapat na manual na i-parse ng mga developer ang string ng URL at i-extract mismo ang mga parameter ng query. Ito ay maaaring isang nakakapagod na proseso at maaaring humantong sa mga pagkakamali kung hindi ginawa nang tama. Bukod pa rito, kung magbabago ang istraktura ng URL, maaaring kailangang i-update ang code nang naaayon.
import { useLocation } from "react-router-dom"; const MyComponent = () => { const location = useLocation(); const queryParams = new URLSearchParams(location.search); return ( <div> <h1>My Component</h1> <p>Query Param: {queryParams.get("myParam")}</p> </div> ); };
1. โI-import ang { useLocation } mula sa 'react-router-dom';โ โ Ini-import ng linyang ito ang useLocation hook mula sa react-router-dom library.
2. โconst MyComponent = () => {โ โ Ang linyang ito ay nagdedeklara ng function na tinatawag na MyComponent na magbabalik ng React component.
3. โconst location = useLocation();โ โ Ginagamit ng linyang ito ang na-import na useLocation hook upang makakuha ng impormasyon tungkol sa kasalukuyang lokasyon ng application (hal., URL).
4. โconst queryParams = bagong URLSearchParams(location.search);โ โ Lumilikha ang linyang ito ng object na naglalaman ng lahat ng parameter ng query sa kasalukuyang URL (hal., ?myParam=foo).
5. Ang natitira sa code ay nagbabalik lamang ng React component na may h1 at p tag na nagpapakita ng halaga ng myParam sa URL query string (kung mayroon man).
React router Dom
Ang React Router DOM ay isang library sa pagruruta para sa React na nagbibigay-daan sa mga developer na gumawa at mamahala ng mga ruta sa loob ng kanilang mga application ng React. Nagbibigay ito ng API para sa pag-navigate sa application, na nagpapahintulot sa mga developer na deklaratibong tukuyin ang mga ruta, mag-render ng mga bahagi batay sa kasalukuyang URL, at mag-link sa pagitan ng iba't ibang bahagi ng application. Sinusuportahan din nito ang mga tampok tulad ng dynamic na pagtutugma ng ruta, pagsubaybay sa lokasyon, at mga navigation guard.
Paano ko makukuha ang query string sa react v6 router
v6
Sa React Router v6, maa-access mo ang mga parameter ng string ng query gamit ang useLocation hook. Ang hook na ito ay nagbabalik ng object ng lokasyon na naglalaman ng impormasyon tungkol sa kasalukuyang URL kasama ang pathname, paghahanap, hash at mga katangian ng estado. Ang property sa paghahanap ay naglalaman ng mga parameter ng string ng query bilang isang string. Pagkatapos ay maaari mong i-parse ang string na ito upang makakuha ng isang bagay na naglalaman ng lahat ng mga parameter ng string ng query.
Halimbawa:
const {search} = useLocation();
const params = bagong URLSearchParams(search);
const param1 = params.get('param1');