निराकरण: राउटर url params प्रतिक्रिया

React Router URL params शी संबंधित मुख्य समस्या ही आहे की ते डायनॅमिक मार्गांमध्ये वापरणे कठीण होऊ शकते. याचे कारण असे की URL पॅराम स्थिर असतात आणि मार्ग तयार केल्यानंतर बदलता येत नाहीत. याचा अर्थ असा की जर वापरकर्त्याला भिन्न पॅरामीटर्ससह भिन्न पृष्ठ ऍक्सेस करण्याची आवश्यकता असेल, तर त्यांना प्रत्येक पॅरामीटर संयोजनासाठी एक नवीन मार्ग तयार करण्याची आवश्यकता असेल. याव्यतिरिक्त, URL पॅराम वापरताना, सर्व संभाव्य संयोजनांचा मागोवा ठेवणे आणि प्रत्येक राउटरद्वारे योग्यरित्या हाताळला जात असल्याची खात्री करणे कठीण होऊ शकते.

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. 
   );

 };

हा कोड URL वरून वापरकर्तानावासह पृष्ठ प्रस्तुत करण्यासाठी प्रतिक्रिया राउटर सेट करत आहे.

1. पहिली ओळ प्रतिक्रिया राउटर DOM लायब्ररीमधून घटक आयात करते.
2. अ‍ॅप फंक्शन राउटर घटक त्याच्या आत रूट घटकासह परत करते, जे निर्दिष्ट करते की “/user/” ने सुरू होणारी कोणतीही URL वापरकर्तापृष्ठ घटक रेंडर करावी.
3. युजरपेज फंक्शन URL वरून वापरकर्तानाव मिळविण्यासाठी useParams() चा वापर करते आणि नंतर ते वापरकर्तानाव वापरून ग्रीटिंग रेंडर करते.

URL params

रिएक्ट राउटर मधील URL पॅराम हे डेटाचे तुकडे आहेत जे URL चा भाग म्हणून रूटला पाठवले जातात. ते विकासकांना आयडी किंवा क्वेरी स्ट्रिंग सारख्या मार्गावर डायनॅमिक माहिती पास करण्याची परवानगी देतात. हे डायनॅमिक मार्ग तयार करण्यासाठी वापरले जाऊ शकते जे डेटाबेसमधून विशिष्ट आयटम प्रदर्शित करणे किंवा वापरकर्त्याच्या इनपुटवर आधारित सामग्री फिल्टर करणे यासारख्या गोष्टींसाठी वापरले जाऊ शकते. रिअॅक्ट राउटर URL पॅराम्समध्ये प्रवेश करण्यासाठी आणि हाताळण्यासाठी साधने प्रदान करते, ज्यामुळे ते तुमच्या ऍप्लिकेशनमध्ये वापरणे सोपे होते.

तुम्हाला React मधील रूटवरून URL पॅराम कसे मिळतील

रिएक्ट राउटरमध्ये, तुम्ही Params हुक वापरून रूटवरून URL पॅराममध्ये प्रवेश करू शकता. हा हुक URL पॅरामीटर्सच्या की-व्हॅल्यू जोड्या असलेली ऑब्जेक्ट परत करतो. उदाहरणार्थ, तुमचा मार्ग /user/:id असल्यास, तुम्ही useParams().id सह आयडी पॅरामीटरमध्ये प्रवेश करू शकता.