हल: url प्रतिक्रिया राउटर में पैरामीटर जोड़ना

URL रिएक्ट राउटर में पैरामीटर जोड़ने से संबंधित मुख्य समस्या यह है कि पैरामीटर को उपयोगकर्ताओं द्वारा आसानी से हेरफेर किया जा सकता है। इससे सुरक्षा संबंधी समस्याएं हो सकती हैं, क्योंकि दुर्भावनापूर्ण उपयोगकर्ता अनधिकृत संसाधनों या डेटा तक पहुंच प्राप्त करने के लिए संभावित रूप से पैरामीटर का उपयोग कर सकते हैं। इसके अतिरिक्त, यदि पैरामीटर मान ठीक से मान्य नहीं हैं, तो यह अनुप्रयोग में अनपेक्षित व्यवहार का कारण बन सकता है। अंत में, यदि बहुत अधिक पैरामीटर जोड़े जाते हैं, तो यह URL की बढ़ी हुई जटिलता के कारण प्रदर्शन समस्याएँ पैदा कर सकता है।

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

 <Router>
    <Route path="/user/:username">
      <User />
    </Route>

    <Link to="/user/john">John</Link>

    function User() {
      let { username } = useParams();

      return (
        <div>{username}</div>   // renders 'john' when the link is clicked. 
      );  
    }    

 </Router>

1. "प्रतिक्रिया-राउटर-डोम" से {ब्राउज़र राउटर को राउटर, रूट, लिंक, यूज़पाराम} के रूप में आयात करें;
// यह प्रतिक्रिया-राउटर-डोम लाइब्रेरी से उन घटकों को आयात करता है जिनका उपयोग इस कोड में किया जाएगा।

2. // यह एक राउटर घटक बनाता है जो विभिन्न मार्गों के बीच नेविगेशन को संभालेगा।

3. // यह 'उपयोगकर्ता नाम' के गतिशील पैरामीटर के साथ एक मार्ग बनाता है।

4. // जब यह मार्ग मेल खाता है तो यह उपयोगकर्ता घटक को प्रस्तुत करता है।

5. जॉन // यह / उपयोगकर्ता / जॉन मार्ग के लिए एक लिंक बनाता है जो क्लिक करने पर उपयोगकर्ता घटक को 'जॉन' के साथ उपयोगकर्ता नाम पैरामीटर के रूप में प्रस्तुत करेगा।

6. फ़ंक्शन उपयोगकर्ता () {// यह एक कार्यात्मक घटक है जो उपयोगकर्ता नाम को तर्क के रूप में लेता है और इसके ऊपर दिए गए लिंक पर क्लिक करके इसे div टैग के अंदर प्रस्तुत करता है।

7. चलो {उपयोगकर्ता नाम} = useParams (); // यह useParams () से उपयोगकर्ता नाम तक पहुंच प्राप्त करने के लिए विनाशकारी का उपयोग करता है।

8. वापसी (

); // यह एक दिव्य तत्व देता है जिसमें उपयोगकर्ता नाम में जो भी मूल्य पारित किया गया था, जो इस मामले में 'जॉन' होगा।

रिएक्ट राउटर क्या है

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

URL के लिए पैरामीटर्स

रिएक्ट राउटर में URL के पैरामीटर डेवलपर्स को URL से रिएक्ट घटकों के लिए डायनामिक डेटा पास करने की अनुमति देते हैं। यह डायनेमिक रूट बनाने के लिए उपयोगी है जिसका उपयोग URL में पास किए गए मापदंडों के आधार पर विभिन्न सामग्री प्रदर्शित करने के लिए किया जा सकता है। उदाहरण के लिए, "/user/:id" जैसे मार्ग का उपयोग URL में दिए गए आईडी पैरामीटर वाले उपयोगकर्ता प्रोफ़ाइल पृष्ठ को प्रदर्शित करने के लिए किया जा सकता है। पैरामीटर का उपयोग डेटा या अन्य कार्यों को फ़िल्टर करने के लिए भी किया जा सकता है जिनके लिए URL से गतिशील डेटा की आवश्यकता होती है।

मैं कैसे प्रतिक्रिया में एक URL के लिए एक पैरामीटर जोड़ सकता हूँ

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

const params = {param1: 'value1', param2: 'value2'};

फिर, अपना मार्ग बनाते समय, आप पैराम्स ऑब्जेक्ट में तर्क के रूप में पास कर सकते हैं:

इस मार्ग पर नेविगेट करते समय पैरामीटर URL में जोड़े जाएंगे।