React Router में सक्रिय लिंक को हाइलाइट करना

मान लीजिए, हमने अपने एप्लिकेशन में कुछ उत्पाद जोड़े हैं और प्रत्येक उत्पाद को देख रहे हैं। हमें कैसे पता चलेगा कि हम किस उत्पाद के पेज पर हैं? आइए सूची में इस उत्पाद को हाइलाइट करें, उदाहरण के लिए मोटे फ़ॉन्ट और भूरे रंग से, और यदि लिंक अभी भी लोड हो रहा है, तो भूरे रंग से।

शुरुआत करने के लिए होम पेज पर जाएं, सूची में 4 उत्पाद जोड़ें और उनमें से प्रत्येक के लिए डेटा दर्ज करें। उन्हें कोई भी नाम दें।

सक्रिय लिंक को हाइलाइट करने में हमें NavLink कंपोनेंट मदद करेगा, यह Link कंपोनेंट का एक प्रकार है जो डेटा की स्थिति के बारे में जानता है। आमतौर पर इसका उपयोग नेविगेशन मेनू बनाते समय किया जाता है।

आइए root.jsx खोलें और NavLink इम्पोर्ट करें (Link के इम्पोर्ट को हटाना न भूलें, नहीं तो React एरर दे सकता है, क्योंकि हम अब इसका उपयोग नहीं कर रहे हैं):

routes/root.jsximport { NavLink } from 'react-router-dom';

फिर लेआउट में Link कंपोनेंट को NavLink से बदलें:

routes/root.jsx<NavLink key={product.id} to={`products/${product.id}`}>
  {product.name ? product.name : <i>unnamed</i>}
</NavLink>

और इसे className प्रॉप्स दें, तथा सशर्त लॉजिक का उपयोग करें। यदि पेज लोड हो गया है, तो लिंक सक्रिय स्थिति में चला जाएगा, यदि लोड हो रहा है, तो लोडिंग स्थिति में, और यदि कुछ भी नहीं हो रहा है, तो पहले जैसा ही रहेगा। इसके आधार पर लिंक का क्लास बदल जाएगा:

routes/root.jsx<NavLink
  key={product.id}
  to={`products/${product.id}`}
  className={({ isActive, isPending }) =>
    isActive ? 'active' : isPending ? 'loading' : ''
  }
>
  {product.name ? product.name : <i>Unnamed</i>}
</NavLink>

अब हमें अपनी css फ़ाइल में active और loading क्लासेस के लिए स्टाइल्स जोड़ने बाकी हैं:

index.cssa.active {
  font-weight: bold;
  color: brown;
}

a.loading {
  color: gray;
}

हो गया! और अब सूची में उत्पादों पर क्लिक करके देखें।