हल: प्रतिक्रिया रूटर डोम IndexRedirect

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

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

<Router>
  <Route path="/">
    <IndexRedirect to="/home" />
    <Route path="/home" component={Home} />
    <Route path="/about" component={About} />
  </Route>  
</Router>

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

2. '”- यह लाइन राउटर घटक में सभी मार्गों को लपेटती है जिसका उपयोग रिएक्ट एप्लिकेशन के लिए रूटिंग सेट करने के लिए किया जाता है।

3. '” - यह रेखा '/' के पथ के साथ एक मार्ग निर्धारित करती है। इस पथ के लिए किसी भी अनुरोध को इस मार्ग द्वारा नियंत्रित किया जाएगा।

4. '” - यह लाइन किसी भी अनुरोध को '/' पथ से '/ होम' पर पुनर्निर्देशित करती है।

5. '” - यह लाइन '/home' के पाथ के साथ एक रूट सेट करती है। इस पथ के लिए किसी भी अनुरोध को होम घटक द्वारा नियंत्रित किया जाएगा जो कि रूट घटक के तर्क के रूप में पारित किया गया है।

6. '” – यह रेखा '/about' के पथ के साथ एक मार्ग निर्धारित करती है। इस पथ के लिए किसी भी अनुरोध को अबाउट घटक द्वारा नियंत्रित किया जाएगा जो रूट घटक के तर्क के रूप में पारित किया गया है।

7."" और "" - ये लाइनें क्रमशः मार्ग और राउटर घटकों दोनों को बंद कर देती हैं

इंडेक्स रीडायरेक्ट क्या है

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

इंडेक्स रीडायरेक्ट कैसे करें

रिएक्ट राउटर में IndexRedirect उपयोगकर्ताओं को आपके एप्लिकेशन के रूट URL से दूसरे URL पर रीडायरेक्ट करने का एक तरीका है। यह उपयोगकर्ताओं को आपके एप्लिकेशन के सबसे महत्वपूर्ण पृष्ठ पर भेजने या लैंडिंग पृष्ठ बनाने के लिए उपयोगी हो सकता है।

रिएक्ट राउटर में IndexRedirect करने के लिए, आपको इसका उपयोग करने की आवश्यकता है अवयव। यह घटक दो सहारा लेता है: "टू" और "पुश"। "टू" प्रोप का उपयोग उस URL को निर्दिष्ट करने के लिए किया जाता है जिसे आप चाहते हैं कि उपयोगकर्ता को पुनर्निर्देशित किया जाए, जबकि "पुश" प्रोप यह निर्धारित करता है कि यह रीडायरेक्ट होने पर ब्राउज़र इतिहास को अपडेट किया जाना चाहिए या नहीं (डिफ़ॉल्ट रूप से सही)।

उदाहरण के लिए, यदि आप चाहते हैं कि आपके रूट URL (जैसे, www.example.com) पर जाने वाले उपयोगकर्ताओं को www.example.com/home पर रीडायरेक्ट किया जाए, तो आप इस तरह से IndexRedirect का उपयोग कर सकते हैं:




… अन्य मार्ग …

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

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