हल: प्रतिक्रिया राउटर v6 के साथ पुनर्निर्देशित करें

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

import { Redirect } from "react-router-dom";

<Redirect to="/home" />

1. यह लाइन रिएक्ट-राउटर-डोम लाइब्रेरी से रीडायरेक्ट कंपोनेंट इम्पोर्ट करती है।

2. यह रेखा एक पुनर्निर्देशन घटक प्रस्तुत करती है, जो उपयोगकर्ता को "/ घर" मार्ग पर पुनर्निर्देशित करेगा।

मैं रिएक्ट राउटर v6 में कैसे पुनर्निर्देशित कर सकता हूं

v6

रिएक्ट राउटर v6 नामक एक नया घटक प्रदान करता है जिसका उपयोग उपयोगकर्ताओं को एक पृष्ठ से दूसरे पृष्ठ पर पुनर्निर्देशित करने के लिए किया जा सकता है। इसका उपयोग करने के लिए, आपको बस रिएक्ट-राउटर-डोम पैकेज से रीडायरेक्ट घटक को आयात करना होगा और फिर इसे अपने रूट कॉन्फ़िगरेशन में उपयोग करना होगा। जब कोई उपयोगकर्ता 'से' प्रोप में निर्दिष्ट पथ पर जाता है, तो उसे 'टू' प्रोप में निर्दिष्ट पथ पर पुनर्निर्देशित किया जाएगा। उदाहरण के लिए:

'प्रतिक्रिया-राउटर-डोम' से आयात {रीडायरेक्ट};
} />

मैं लॉगिन के बाद प्रतिक्रिया राउटर v6 में कैसे पुनर्निर्देशित करूं

एक सफल लॉगिन के बाद पुनर्निर्देशन वेब अनुप्रयोगों में एक सामान्य विशेषता है। रिएक्ट राउटर v6 में, आप इसका उपयोग कर सकते हैं एक सफल लॉगिन के बाद उपयोगकर्ता को पुनर्निर्देशित करने के लिए घटक।

ऐसा करने के लिए, आपको एक ऐसा रूट बनाना होगा जो यह जांचे कि उपयोगकर्ता लॉग इन है या नहीं और फिर उन्हें तदनुसार रीडायरेक्ट करता है। उदाहरण के लिए:

{
अगर (लॉग इन है) {
वापसी ;
और} {
वापसी ;
}
}} />

इस उदाहरण में, हम जांच कर रहे हैं कि उपयोगकर्ता लॉग इन है या नहीं और फिर या तो लॉगिन पेज घटक प्रस्तुत कर रहा है या उन्हें /डैशबोर्ड पर रीडायरेक्ट कर रहा है। आप प्रोप को रीडायरेक्ट घटक में भी पास कर सकते हैं जैसे: यह आपको यह ट्रैक रखने की अनुमति देता है कि उपयोगकर्ता रीडायरेक्ट होने से पहले कहां था।

मैं प्रतिक्रिया में स्वचालित रूप से रीडायरेक्ट कैसे करूं

रिएक्ट राउटर एक रीडायरेक्ट घटक प्रदान करता है जिसका उपयोग कुछ शर्तों के पूरा होने पर उपयोगकर्ताओं को स्वचालित रूप से रीडायरेक्ट करने के लिए किया जा सकता है। इसका उपयोग करने के लिए, आपको उस पथ से गुजरना होगा जिसे आप एक प्रोप के रूप में पुनर्निर्देशित करना चाहते हैं। यदि आवश्यक हो तो आप राज्य और/या क्वेरी पैरामीटर वाले ऑब्जेक्ट में भी पास कर सकते हैं।

स्वचालित रूप से रीडायरेक्ट करने के लिए, आपको रूट घटक के भीतर घटक का उपयोग करना होगा और पुनर्निर्देशन कब होना चाहिए, इसके लिए एक शर्त सेट अप करनी होगी। उदाहरण के लिए, यदि आप किसी लिंक पर क्लिक करने के बाद उपयोगकर्ताओं को अपने एप्लिकेशन के होम पेज से लॉगिन पेज पर रीडायरेक्ट करना चाहते हैं, तो आप ऐसा कुछ कर सकते हैं:


{लॉग इन है? : }

इस उदाहरण में, हम isLoggedIn बूलियन चर (जिसे कहीं और सेट करने की आवश्यकता होगी) का उपयोग हमारी शर्त के रूप में कर रहे हैं जब हमें पुनर्निर्देशन करना चाहिए। अगर यह सच है, तो हम अपने होम कंपोनेंट को रेंडर करते हैं; अन्यथा, हम पुनर्निर्देशन करते हैं।

प्रतिक्रिया में 5 सेकंड के बाद आप कैसे रीडायरेक्ट करते हैं

रिएक्ट राउटर में 5 सेकंड के बाद रीडायरेक्ट करने के लिए, आप तर्क के रूप में वांछित मार्ग के साथ history.push() विधि को कॉल करने के लिए सेटटाइमआउट () फ़ंक्शन का उपयोग कर सकते हैं।

उदाहरण:
आयात {useHistory} "प्रतिक्रिया-राउटर-डोम" से;
कॉन्स्ट हिस्ट्री = यूज़ हिस्ट्री ();
सेटटाइमआउट (() => {
इतिहास.पुश ("/ पुनर्निर्देशित पृष्ठ");
}, एक्सएनएनएक्स);

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

1 विचार "समाधान: रिएक्ट राउटर v6 के साथ रीडायरेक्ट करें"

  1. Pingback: यूआरएल

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