रिएक्ट में क्वेरी पैराम्स को कैसे अपडेट करें

क्वेरी पैरामीटर नाम/मान युग्म हैं जिन्हें आप URL के अंत में जोड़ सकते हैं। वे आपको उस यूआरएल में डेटा स्टोर करने की अनुमति देते हैं।

क्वेरी पैरामीटर का एक व्यावहारिक अनुप्रयोग उपयोगकर्ता की खोज से मूल्यों को संग्रहित करना है।

क्वेरी पैरामीटर्स को अपडेट करने के लिए रिएक्ट राउटर का उपयोग करना

जब कोई उपयोगकर्ता खोज बार में कोई क्वेरी दर्ज करता है, तो आपको उस क्वेरी को URL में संग्रहीत करना चाहिए। उदाहरण के लिए, यदि कोई उपयोगकर्ता "प्रतिक्रिया" श्रेणी में पोस्ट के लिए ब्लॉग की सूची खोजता है, तो अपडेट किया गया URL इस तरह दिखना चाहिए: /posts? टैग = प्रतिक्रिया.

रिएक्ट useSearchParams हुक प्रदान करता है जो आपको क्वेरी स्ट्रिंग्स को पढ़ने या अपडेट करने में मदद करता है।

आरंभ करने के लिए, App.js में एक खोज बार बनाएं।

आयात {यूज़स्टेट} 





instagram viewer

से"प्रतिक्रिया";
निर्यातगलती करनासमारोहअनुप्रयोग() {
कॉन्स्ट [क्वेरी, सेटक्वेरी] = यूज़स्टेट ('')
कॉन्स्ट हैंडल चेंज = (इ) => {
query(इ।लक्ष्य।कीमत)
 };
वापस करना (
<डिव>
<प्रपत्रभूमिका="खोज">
<इनपुटपरिवर्तन पर={हैंडलचेंज}कीमत={जिज्ञासा}प्रकार="खोज" />
प्रपत्र>
डिव>
 );
}

पालन ​​करना याद रखें प्रतिक्रिया का उपयोग करते समय सर्वोत्तम अभ्यास उनमें से सबसे अधिक प्राप्त करने के लिए।

अगला, रिएक्ट राउटर स्थापित करें और अपने एप्लिकेशन में रूटिंग जोड़ें। यह काम करने के लिए useSearchParams हुक के लिए जरूरी है।

आयात प्रतिक्रिया से"प्रतिक्रिया";
आयात रिएक्टडॉम से"प्रतिक्रिया-डोम/क्लाइंट";
आयात"./index.css";
आयात अनुप्रयोग से"।/अनुप्रयोग";
आयात {ब्राउज़र राउटर, रूट, रूट} से"प्रतिक्रिया-राउटर-डोम";
कॉन्स्ट जड़ = ReactDOM.createRoot (दस्तावेज़.getElementById("जड़"));
जड़।प्रदान करना(
<प्रतिक्रिया। सख्त मोड>
<ब्राउज़रराउटर>
<मार्गों>
"/" तत्व = {} />
मार्गों>
ब्राउज़रराउटर>
प्रतिक्रिया। सख्त मोड>
);

अब आप हैंडलचेंज () फ़ंक्शन को संशोधित करके क्वेरी को URL में उपयोगकर्ता प्रकार के रूप में सहेज सकते हैं।

आयात {यूज़स्टेट} से"प्रतिक्रिया";
आयात {useSearchParams} से"प्रतिक्रिया-राउटर-डोम";
निर्यातगलती करनासमारोहअनुप्रयोग() {
कॉन्स्ट [क्वेरी, सेटक्वेरी] = यूज़स्टेट ("");
कॉन्स्ट [SearchParams, setSearchParams] = useSearchParams({});
कॉन्स्ट हैंडल चेंज = (इ) => {
setSearchParams({ जिज्ञासा: e.target.value});
query(इ।लक्ष्य।कीमत);
 };
वापस करना (
<डिव>
<प्रपत्रभूमिका="खोज">
<इनपुटपरिवर्तन पर={हैंडलचेंज}कीमत={जिज्ञासा}प्रकार="खोज" />
प्रपत्र>
डिव>
 );
}

URL से क्वेरी मान प्राप्त करना

आप searchParams.get() का उपयोग करके और क्वेरी पैरामीटर के नाम में पास करके एकल क्वेरी मान प्राप्त कर सकते हैं।

कॉन्स्ट [SearchParams, setSearchParams] = useSearchParams({});
कॉन्स्ट मान = searchParams.get ('उपनाम')

सभी क्वेरी पैरामीटर प्राप्त करने के लिए, searchParams.entries() का उपयोग करें।

कॉन्स्ट [SearchParams, setSearchParams] = useSearchParams({});
कॉन्स्ट मान = searchParams.entries ()

यह विधि एक पुनरावर्तक लौटाती है जिसे आप कुंजी/मान जोड़े का उपयोग करके पुन: सक्रिय कर सकते हैं।

के लिए (कॉन्स्ट [मौलिक मूल्य] का मान) {
सांत्वना देना।लकड़ी का लट्ठा(`${कुंजी}, ${मूल्य}`);
}

कुंजी/मान युग्म उसी क्रम में हैं जिस क्रम में वे URL में दिखाई देते हैं।

खोज परिणामों की साझा करने की क्षमता में सुधार करने के लिए क्वेरी पैरामीटर्स का उपयोग करें

URL में क्वेरी पैरामीटर के रूप में खोज मानों या किसी अन्य डेटा को संग्रहीत करने के लिए useSearchParams हुक बहुत अच्छा है।

आप useState हुक के साथ खोज मानों का ट्रैक भी रख सकते हैं, लेकिन उन्हें क्वेरी पैरामीटर में संग्रहीत करने का अर्थ है कि लोग उन्हें URL के माध्यम से साझा कर सकते हैं।