हल: प्रतिक्रिया रूटर url params

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

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

 const App = () => {

   return (
     <Router>
       <div>

         <Route path="/user/:username" component={UserPage} />

       </div>
     </Router>
   );

 };

 const UserPage = () => {

   let { username } = useParams(); // Get the username from the URL.

   return (
     <div>Hello, {username}!</div> // Render a greeting with the username. 
   );

 };

यह कोड यूआरएल से उपयोगकर्ता नाम वाले पेज को प्रस्तुत करने के लिए एक रिएक्ट राउटर स्थापित कर रहा है।

1. पहली पंक्ति रिएक्ट राउटर डोम लाइब्रेरी से घटकों का आयात करती है।
2. ऐप फ़ंक्शन राउटर घटक को इसके अंदर रूट घटक के साथ लौटाता है, जो निर्दिष्ट करता है कि "/ उपयोगकर्ता /" से शुरू होने वाले किसी भी URL को UserPage घटक को प्रस्तुत करना चाहिए।
3. UserPage फ़ंक्शन URL से उपयोगकर्ता नाम प्राप्त करने के लिए useParams() का उपयोग करता है और फिर उस उपयोगकर्ता नाम का उपयोग करके अभिवादन करता है।

यूआरएल पैराम्स

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

आप रिएक्ट में एक रूट से URL पैराम कैसे प्राप्त करते हैं

रिएक्ट राउटर में, आप useParams हुक का उपयोग करके URL params को रूट से एक्सेस कर सकते हैं। यह हुक URL पैरामीटर्स के की-वैल्यू पेयर वाले ऑब्जेक्ट को लौटाता है। उदाहरण के लिए, यदि आपका रूट /user/:id है, तो आप useParams().id के साथ आईडी पैरामीटर तक पहुंच सकते हैं।

संबंधित पोस्ट:

एक टिप्पणी छोड़ दो