ઉકેલી: url react રાઉટર dom v6 થી ક્વેરી મેળવો

URL રિએક્ટ રાઉટર DOM v6 થી ક્વેરી મેળવવા સંબંધિત મુખ્ય સમસ્યા એ છે કે તે ક્વેરી પેરામીટર્સને એક્સેસ કરવા માટે બિલ્ટ-ઇન રીત પ્રદાન કરતું નથી. તેના બદલે, વિકાસકર્તાઓએ મેન્યુઅલી URL સ્ટ્રિંગને પાર્સ કરવું જોઈએ અને ક્વેરી પેરામીટર્સ જાતે જ બહાર કાઢવા જોઈએ. આ એક કંટાળાજનક પ્રક્રિયા હોઈ શકે છે અને જો યોગ્ય રીતે કરવામાં ન આવે તો ભૂલો થઈ શકે છે. વધુમાં, જો URL માળખું બદલાય છે, તો કોડને તે મુજબ અપડેટ કરવાની જરૂર પડી શકે છે.

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. “'react-router-dom' માંથી { useLocation } આયાત કરો;” - આ લાઇન રીએક્ટ-રાઉટર-ડોમ લાઇબ્રેરીમાંથી યુઝ લોકેશન હૂક આયાત કરે છે.
2. “const MyComponent = () => {” – આ લાઇન MyComponent નામનું ફંક્શન જાહેર કરે છે જે પ્રતિક્રિયા ઘટક આપશે.
3. "const લોકેશન = useLocation();" – આ લાઇન એપ્લિકેશનના વર્તમાન સ્થાન (દા.ત., URL) વિશે માહિતી મેળવવા માટે આયાતી ઉપયોગ સ્થાન હૂકનો ઉપયોગ કરે છે.
4. "const queryParams = new URLSearchParams(location.search);" – આ લાઇન એક ઑબ્જેક્ટ બનાવે છે જેમાં વર્તમાન URL (દા.ત., ?myParam=foo) માં તમામ ક્વેરી પરિમાણો શામેલ છે.
5. બાકીનો કોડ ફક્ત h1 અને p ટેગ સાથે પ્રતિક્રિયા ઘટક પરત કરી રહ્યો છે જે URL ક્વેરી સ્ટ્રિંગમાં myParam ની કિંમત દર્શાવે છે (જો તે અસ્તિત્વમાં છે).

પ્રતિક્રિયા રાઉટર ડોમ

React રાઉટર DOM એ React માટેની રૂટીંગ લાઇબ્રેરી છે જે વિકાસકર્તાઓને તેમની React એપ્લિકેશનમાં રૂટ બનાવવા અને મેનેજ કરવાની મંજૂરી આપે છે. તે એપ્લિકેશનને નેવિગેટ કરવા માટે એક API પ્રદાન કરે છે, વિકાસકર્તાઓને ઘોષણાત્મક રીતે રૂટ્સ વ્યાખ્યાયિત કરવા, વર્તમાન URL પર આધારિત ઘટકો રેન્ડર કરવા અને એપ્લિકેશનના વિવિધ ભાગો વચ્ચે લિંક કરવાની મંજૂરી આપે છે. તે ડાયનેમિક રૂટ મેચિંગ, લોકેશન ટ્રેકિંગ અને નેવિગેશન ગાર્ડ્સ જેવી સુવિધાઓને પણ સપોર્ટ કરે છે.

હું પ્રતિક્રિયા v6 રાઉટરમાં ક્વેરી સ્ટ્રિંગ કેવી રીતે મેળવી શકું

v6

રિએક્ટ રાઉટર v6 માં, તમે useLocation હૂકનો ઉપયોગ કરીને ક્વેરી સ્ટ્રિંગ પરિમાણોને ઍક્સેસ કરી શકો છો. આ હૂક એક સ્થાન ઑબ્જેક્ટ આપે છે જેમાં પાથનામ, શોધ, હેશ અને સ્ટેટ પ્રોપર્ટીઝ સહિત વર્તમાન URL વિશેની માહિતી હોય છે. શોધ ગુણધર્મમાં ક્વેરી સ્ટ્રિંગ પેરામીટર્સ સ્ટ્રિંગ તરીકે હોય છે. પછી તમે ક્વેરી સ્ટ્રિંગ પેરામીટર્સ સમાવતા ઑબ્જેક્ટ મેળવવા માટે આ સ્ટ્રિંગને પાર્સ કરી શકો છો.
દાખ્લા તરીકે:
const {search} = useLocation();
const params = new URLSearchParams(શોધ);
const param1 = params.get('param1');