React Router में एक और रूट जोड़ना

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

शुरुआत के लिए, आइए हमारा एप्लिकेशन खोलें जो हमने पिछले पाठों में बनाया था और routes फोल्डर में product.jsx फ़ाइल बनाएं। इसमें हम एक Product कंपोनेंट बनाएंगे:

routes/product.jsxfunction Product() {}

export default Product;

अब Product के अंदर एक product ऑब्जेक्ट बनाएं, जिसमें name, cost और amount प्रॉपर्टीज़ हों, अभी के लिए ये कुछ निश्चित मान होंगे:

routes/product.jsxfunction Product() {
  const product = {
    name: 'Product',
    cost: 400,
    amount: 5,
  };
}

export default Product;

और उत्पाद पृष्ठ पर हम क्रमशः उसका नाम, लागत और मात्रा प्रदर्शित करेंगे:

routes/product.jsxreturn (
  <div>
    <h2>उत्पाद पृष्ठ</h2>
    <p>नाम: {product.name}</p>
    <p>लागत: {product.cost}</p>
    <p>मात्रा: {product.amount}</p>
  </div>
);

Product कंपोनेंट को main.jsx फ़ाइल में इम्पोर्ट जरूर करें:

main.jsximport Product from './routes/product';

और, अंत में, हमारे एप्लिकेशन में एक और रूट जोड़ें, इसे रूट रूट के ठीक बाद करें। पथ के रूप में 'products/:productId' निर्दिष्ट करें, और प्रदर्शन के लिए एलिमेंट हमारा Product कंपोनेंट है:

main.jsx{
  path: '/',
  element: <Root />,
  errorElement: <ErrorPage404 />,
},
{
  path: 'products/:productId',
  element: <Product />,
},

और अब एप्लिकेशन चलाएं, लिंक्स पर क्लिक करें और पहुंच जाएं उत्पाद पृष्ठ पर (अभी यह हमारे लिए सभी लिंक्स के लिए समान है), न कि त्रुटि वाले पृष्ठ पर।