Redux में ब्राउज़र में उत्पाद पृष्ठ

पिछले पाठ में हमने उत्पाद के लिए एक अलग पृष्ठ बनाया। अब हमें यह सुनिश्चित करना है कि किसी भी बटन पर क्लिक करने पर हमारा पृष्ठ ब्राउज़र में दिखाई दे।

शुरुआत में, आइए इसके लिए एक पता जोड़ें, जिस पर यह प्रदर्शित होगा। आइए App.jsx फ़ाइल खोलें, जिसमें हम रूट्स को परिभाषित करते हैं, और children में एक और चाइल्ड रूट जोड़ें (कृपया ProductPage.jsx को इम्पोर्ट करना न भूलें)। आइए पथ और उस कंपोनेंट को निर्दिष्ट करें जिसे हम प्रदर्शित करेंगे:

App.jsx{
  path: '/products/:productId',
  element: <ProductPage />,
},

अब आइए products फ़ोल्डर में ProductsList.jsx खोलें और dispProducts के लिए कोड को थोड़ा संशोधित करें। अब हमारे पास प्रत्येक उत्पाद की पूरी जानकारी के साथ एक अलग पृष्ठ है। इसका मतलब है कि उत्पादों की सूची में हम केवल उत्पाद का नाम और विवरण का संक्षिप्त पाठ प्रदर्शित करेंगे। साथ ही, हम राउटर लाइब्रेरी से नेविगेशन तत्व के रूप में एक Link लिंक जोड़ेंगे, जिस पर क्लिक करने से उत्पाद पृष्ठ पर पहुंचा जा सकेगा। आइए डिव को product-excerpt क्लास भी जोड़ें, ताकि उत्पादों को अलग किया जा सके। अब dispProducts के लिए हमारा कोड इस प्रकार होगा:

products/ProductsList.jsxconst dispProducts = products.map((product) => (
  <div key={product.id} className="product-excerpt">
    <h3>{product.name}</h3>
    <p>{product.desc.substring(0, 100)}</p>
    <Link to={`/products/${product.id}`} className="link-btn">
      view
    </Link>
  </div>
))

आइए Link को इम्पोर्ट करें:

products/ProductsList.jsximport { Link } from 'react-router-dom'

और index.css में link-btn और product-excerpt क्लासेस के लिए स्टाइल जोड़ें:

index.css.product-excerpt {
  margin-top: 30px;
  border: 1px solid gray;
  border-radius: 5px;
  padding: 10px;
}

.link-btn {
  border: 1.5px solid gray;
  border-radius: 10px;
  background-color: coral;
  color: black;
  padding: 1px 12px 1px 12px;
}

अंत में, आइए बाईं ओर के मेन्यू में उस लिंक को भी कार्यशील बनाएं, जो उत्पादों की सूची वाले पृष्ठ पर ले जाती है, ताकि हम किसी भी अन्य स्थान से इसमें प्रवेश कर सकें। इसके लिए आइए अपना root.jsx खोलें और कोड की इस पंक्ति को बदलें:

app/root.jsx<a>Products</a>

निम्नलिखित के साथ:

app/root.jsx<NavLink to="/products" end>
  Products
</NavLink>

साथ ही, React राउटर लाइब्रेरी से NavLink को इम्पोर्ट करना न भूलें:

app/root.jsximport { Outlet, NavLink } from 'react-router-dom'

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