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

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

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

function Product() {}

export default Product;

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

function Product() {
	const product = {
		name: 'Product',
		cost: 400,
		amount: 5,
	};
}

export default Product;

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

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

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

import Product from './routes/product';

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

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

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

पिछले पाठों के असाइनमेंट्स में आपके द्वारा बनाए गए एप्लिकेशन को लें। पाठ की सामग्री का उपयोग करके, इसी तरह student.jsx फ़ाइल बनाएं, छात्र पृष्ठ पर उसका नाम, उपनाम, दाखिले का वर्ष और विशेषता प्रदर्शित होनी चाहिए। main.jsx फ़ाइल में छात्र पृष्ठ के लिए एक नया रूट जोड़ें, path का मान 'students/:studentId' पर सेट करें। सुनिश्चित करें कि लिंक्स पर क्लिक करने पर अब आप छात्र के पृष्ठ पर पहुंचते हैं।