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

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

routes/root.jsxfunction Root() {
  return <div>Hello Router!</div>;
}

export default Root;

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

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

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

main.jsximport Root from './routes/root';