React Router में राउटर जोड़ना

राउटर से थोड़ा परिचित होने के बाद, हम उनमें से एक को एप्लिकेशन में जोड़ सकते हैं।

लेकिन सबसे पहले हमें अपने एप्लिकेशन के टेम्पलेट को थोड़ा साफ करने की आवश्यकता है, जिसे हमने पिछली कक्षाओं में बनाया था। विशेष रूप से - src फोल्डर को संभालेंगे। इसमें से assets फोल्डर, फाइलें App.css, App.jsx फेंक दें। सामान्य तौर पर, आपके पास इसमें केवल main.jsx और index.css ही बचेगा।

index.css खोलें और इसे पूरी तरह से साफ कर दें। इसे खाली रहने दें।

अब हम अपनी मुख्य फाइल main.jsx को संभालेंगे। इसमें हमारे पास यह कोड होगा:

import './index.css'
import React from 'react';
import ReactDOM from 'react-dom/client';

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>

	</React.StrictMode>
);

और अब हम राउटर जोड़ सकते हैं। हम BrowserRouter का उपयोग करेंगे, क्योंकि इसका उपयोग अक्सर वेब एप्लिकेशन में किया जाता है। आधुनिक सिंटैक्स के बारे में भी न भूलें। आयात लाइन जोड़ें:

import {
	createBrowserRouter,
	RouterProvider,
} from 'react-router-dom';

फिर, एक router स्थिरांक बनाएं और आयात लाइनों के बाद अपना BrowserRouter बनाएं। इसे इस तरह से करें कि मुख्य पृष्ठ पर हमें 'Hello Router!' लेबल वाला एक div दिखाई दे। इसके लिए मुख्य पृष्ठ का पथ लिखें और वह तत्व जिसे हम प्रदर्शित करेंगे:

const router = createBrowserRouter([
	{
		path: '/',
		element: <div>Hello Router!</div>,
	},
]);

हमें RouterProvider घटक जोड़ने की भी आवश्यकता है और ऊपर बनाए गए राउटर को इसमें डालें। यह राउटर की सभी वस्तुओं को स्वीकार करता है, हमारे एप्लिकेशन को रेंडर करता है और अन्य API को जोड़ता है:

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<RouterProvider router={router} />
	</React.StrictMode>
);

पूरा कोड इस तरह दिखेगा:

import './index.css'
import React from 'react';
import ReactDOM from 'react-dom/client';
import {
	createBrowserRouter,
	RouterProvider,
} from 'react-router-dom';

const router = createBrowserRouter([
	{
		path: '/',
		element: <div>Hello world!</div>,
	},
]);

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<RouterProvider router={router} />
	</React.StrictMode>
);

परिवर्तनों को सहेजें। बधाई हो! हमारा एप्लिकेशन अब त्रुटि नहीं दे रहा है। अब, यदि हम इसे लॉन्च करते हैं, तो ब्राउज़र के मुख्य पृष्ठ पर हम 'Hello Router!' देखेंगे।

दी गई सामग्री का उपयोग करके, यह सुनिश्चित करें कि मुख्य पृष्ठ पर आपके एप्लिकेशन, जिसे आपने पिछले पाठों के गृहकार्य में बनाया था, आपको पाठ 'I'm number one in React!' वाला एक पैराग्राफ दिखाई दे।