React Router: রাস্তা চেনার মতোই সহজ!

React Router দিয়ে ওয়েবসাইটে ভ্রমণ করা একদম সহজ হয়ে যায়। তুমি যেমন একটা শহরের রাস্তা চিনে বিভিন্ন জায়গায় যেতে পারো, তেমনই React Router তোমার অ্যাপের বিভিন্ন পৃষ্ঠায় নিয়ে যেতে সাহায্য করে....

আরিফ আলমাছ

ওয়েব ডেভেলপার

📅১৩ সেপ্টেম্বর, ২০২৪

React Router কি?

React Router হলো এমন একটা টুল, যেটা দিয়ে React অ্যাপে বিভিন্ন পৃষ্ঠায় নেভিগেট করা যায়। মানে তুমি এক পেজ থেকে অন্য পেজে যেতে পারবে, ঠিক যেমন গুগল ম্যাপ দিয়ে তুমি তোমার গন্তব্য ঠিক করো। ওয়েবসাইটে সাধারণত বিভিন্ন লিংক থাকে, যা ক্লিক করলে নতুন পেজে নিয়ে যায়। কিন্তু React এ কোনো রিফ্রেশ ছাড়া দ্রুত পেজ বদলানো React Router দিয়েই সম্ভব!

কেন React Router দরকার?

ধরো তুমি একটা SPA (Single Page Application) বানাচ্ছো, যেখানে সবকিছু এক পেজের মধ্যেই ঘটে। এখন ইউজার যদি বিভিন্ন পেজে যেতে চায়, React Router ছাড়া এটা করা অনেক কঠিন হবে। React Router তোমাকে URL অনুযায়ী পেজ লোড করতে সাহায্য করে। যেমন, /home, /about, /contact—এই সব URL-এর জন্য আলাদা আলাদা পেজ দেখাবে।

কিভাবে React Router কাজ করে?

React Router ব্যবহার করা খুবই সহজ। প্রথমে, তোমার প্রজেক্টে react-router-dom ইনস্টল করতে হবে:

npm install react-router-dom

এরপর BrowserRouter, Routes, আর Route ব্যবহার করে তুমি তোমার রাউট তৈরি করতে পারো। উদাহরণ দিয়ে দেখি:

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
 
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}
 
export default App;

এখানে, আমরা Router দিয়ে পুরো অ্যাপটাকে ঢেকে দিলাম। Routes এর মধ্যে Route গুলো বলছে, কোন পাথে কোন কম্পোনেন্ট লোড হবে। /about পাথে গেলে About কম্পোনেন্ট দেখাবে, আর / পাথে গেলে Home কম্পোনেন্ট।

Link Component দিয়ে নেভিগেশন

তুমি চাইলে Link কম্পোনেন্ট ব্যবহার করে ইউজারকে বিভিন্ন পেজে পাঠাতে পারো। এটা HTML এর a ট্যাগের মতোই কাজ করে, কিন্তু পুরো অ্যাপকে রিফ্রেশ না করেই পেজ বদলায়।

import { Link } from 'react-router-dom';
 
function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

এখানে Link ব্যবহার করে হোম পেজ আর অ্যাবাউট পেজের মধ্যে নেভিগেট করা যায়।

শেষ কথা

React Router আসলে রাস্তা চিনার মতোই সহজ। এটা দিয়ে খুব সহজে তুমি React অ্যাপের ভেতরে এক পেজ থেকে অন্য পেজে যেতে পারো। কোনো জটিলতা ছাড়াই ইউজারকে নেভিগেট করানোর জন্য React Router হলো সেরা পথপ্রদর্শক। শুরুতেই একটু সময় দিয়ে এটা শিখে নাও, তারপর দেখো, তোমার ওয়েবসাইটে ভ্রমণ করা হবে আরও মজার!