हल: url प्रतिक्रिया राउटर डोम 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. "प्रतिक्रिया-राउटर-डोम 'से आयात {उपयोगस्थान};" - यह लाइन रिएक्ट-राउटर-डोम लाइब्रेरी से यूज़लोकेशन हुक को इम्पोर्ट करती है।
2. "const MyComponent = () => {" - यह लाइन MyComponent नामक एक फ़ंक्शन की घोषणा करती है जो एक रिएक्ट घटक लौटाएगा।
3. "स्थिर स्थान = उपयोग स्थान ();" - यह लाइन एप्लिकेशन के वर्तमान स्थान (जैसे, URL) के बारे में जानकारी प्राप्त करने के लिए आयातित उपयोग स्थान हुक का उपयोग करती है।
4. "स्थिरांक queryParams = नया URLSearchParams (स्थान। खोज);" – यह लाइन एक ऐसा ऑब्जेक्ट बनाती है जिसमें वर्तमान URL के सभी क्वेरी पैरामीटर शामिल होते हैं (उदा., ?myParam=foo)।
5. शेष कोड केवल h1 और p टैग के साथ एक रिएक्ट घटक लौटा रहा है जो URL क्वेरी स्ट्रिंग (यदि यह मौजूद है) में myParam का मान प्रदर्शित करता है।

प्रतिक्रिया राउटर डोम

रिएक्ट राउटर डोम रिएक्ट के लिए एक रूटिंग लाइब्रेरी है जो डेवलपर्स को उनके रिएक्ट एप्लिकेशन के भीतर रूट बनाने और प्रबंधित करने की अनुमति देता है। यह एप्लिकेशन को नेविगेट करने के लिए एक एपीआई प्रदान करता है, जिससे डेवलपर्स को मार्गों को स्पष्ट रूप से परिभाषित करने, वर्तमान URL के आधार पर घटकों को प्रस्तुत करने और एप्लिकेशन के विभिन्न भागों के बीच लिंक करने की अनुमति मिलती है। यह डायनेमिक रूट मैचिंग, लोकेशन ट्रैकिंग और नेविगेशन गार्ड जैसी सुविधाओं का भी समर्थन करता है।

मैं प्रतिक्रिया v6 राउटर में क्वेरी स्ट्रिंग कैसे प्राप्त करूं?

v6

रिएक्ट राउटर v6 में, आप उपयोग स्थान हुक का उपयोग करके क्वेरी स्ट्रिंग पैरामीटर तक पहुंच सकते हैं। यह हुक एक लोकेशन ऑब्जेक्ट लौटाता है जिसमें पथनाम, खोज, हैश और राज्य गुणों सहित वर्तमान URL के बारे में जानकारी होती है। खोज गुण में स्ट्रिंग के रूप में क्वेरी स्ट्रिंग पैरामीटर होते हैं। फिर आप सभी क्वेरी स्ट्रिंग पैरामीटर वाली ऑब्जेक्ट प्राप्त करने के लिए इस स्ट्रिंग को पार्स कर सकते हैं।
उदाहरण के लिए:
const {खोज} = उपयोग स्थान ();
const params = नया URLSearchParams (खोज);
const param1 = params.get ('param1');