React Router में नेविगेशन स्थिति

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

इस पाठ में, हम उपयोगकर्ता को दिखाएंगे कि हमारा पृष्ठ किस स्थिति में है। इसमें हुक useNavigation हमारी मदद कर सकता है। यह हुक अपने काम का परिणाम कई गुणों वाली एक वस्तु के रूप में देता है। हम इनमें से एक गुण - state गुण - में दिलचस्पी लेंगे।

state गुण के 3 मान हो सकते हैं: 'idle' (कुछ नहीं हो रहा), 'submitting' (जब POST, PUT, PATCH या DELETE के माध्यम से फॉर्म सबमिट करने पर रूट का action कहलाया जाता है), 'loading' (जब अगले रूट के लिए लोडर कहलाया जाता है ताकि अगला पृष्ठ रेंडर हो सके)। हम अंतिम मान में दिलचस्पी लेंगे।

चलिए root.jsx फ़ाइल में जाते हैं और इस हुक को इम्पोर्ट करते हैं:

import { useNavigation } from 'react-router-dom';

फिर, हुक द्वारा लौटाए गए परिणाम के लिए, Root फ़ंक्शन में return से पहले एक चर navigation बनाते हैं:

const { products } = useLoaderData();
const navigation = useNavigation();

और अब इसके state गुण का उपयोग करते हैं, अगर इसका मान 'loading' होगा, तो हम उस डिव के लिए loading क्लास सेट करेंगे, जिसमें उत्पाद डेटा रेंडर हो रहा है:

<div id="product" className={navigation.state === 'loading' ? 'loading' : ''}>
	<Outlet />
</div>

हमें index.css में loading क्लास के लिए स्टाइल जोड़ना बाकी है। चलिए लोडिंग स्थिति में सिर्फ opacity बढ़ा देते हैं:

div.loading {
	opacity: 0.3;
}

अब, अगर साइट को रीलोड करके, सूची में उत्पादों पर क्लिक करें या, उदाहरण के लिए, एक नया उत्पाद जोड़ें, तो हम देखेंगे कि अगला पृष्ठ दिखने से पहले वर्तमान पृष्ठ एक पल के लिए फीका पड़ जाएगा।

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