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!' হবে।