React Router में रूट रूट बनाना

अक्सर मुख्य पृष्ठ पर ले जाने वाले मुख्य मार्ग को रूट रूट (root route) कहा जाता है, क्योंकि अन्य मार्ग इसके अंदर रेंडर होंगे। इसे एक अलग घटक के रूप में दर्शाना बहुत सुविधाजनक है। इसलिए हम फिर से अपने एप्लिकेशन को लेते हैं और src फ़ोल्डर में एक और फ़ोल्डर बनाते हैं और उसे routes नाम देते हैं। अब इस फ़ोल्डर में हम एक अलग React घटक Root के लिए root.jsx फ़ाइल बनाते हैं। फ़ाइल में कोड इस तरह दिखेगा:

function Root() {
	return <div>Hello Router!</div>;
}

export default Root;

और अब हम main.jsx फ़ाइल के कोड के टुकड़े में बदलाव करते हैं, क्योंकि element के मान के रूप में अब हम Root घटक पास करेंगे, और इसकी सामग्री अब root.jsx नामक एक अलग फ़ाइल में है:

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
	},
]);

main.jsx में अपने घटक के आयात वाली लाइन न भूलें:

import Root from './routes/root';

पिछले पाठों के असाइनमेंट में आपके द्वारा बनाए गए एप्लिकेशन को खोलें। रूट रूट के लिए एक अलग React घटक Root root.jsx फ़ाइल में बनाएं, जैसा कि इस पाठ में बताया गया है। अपने main.jsx में बदलाव करें।