რისთვის გამოიყენება react-router-dom ბიბლიოთეკა React-ში?

react-router-dom React-এ এক পৃষ্ঠার অ্যাপ্লিকেশন (SPA) নির্মাণের জন্য ব্যবহৃত হয়, ক্লায়েন্ট-সাইড রাউটিং সরবরাহ করে।

এটি কেন দরকার?

• নেভিগেশন: ব্যবহারকারীদের সম্পূর্ণ পৃষ্ঠা রিফ্রেশ না করে বিভিন্ন "পৃষ্ঠাগুলিতে" (উপাদান) যেতে দেয়।
• URL ব্যবস্থাপনা: ব্রাউজারের ঠিকানা বারে বর্তমান URL-কে প্রদর্শিত উপাদানের সাথে সিঙ্ক্রোনাইজ করে।
• ডাইনামিক রাউটিং: প্যারামিটার সহ রুটগুলি নির্ধারণ করতে দেয় (উদাহরণস্বরূপ, /users/:id) এবং নির্দিষ্ট ডেটা লোড করে।
• প্রোগ্রাম্যাটিক নেভিগেশন: কোডের মাধ্যমে ব্যবহারকারীকে পুনঃনির্দেশ করতে দেয় (উদাহরণস্বরূপ, সফলভাবে ডেটা সংরক্ষণ করার পরে)।

প্রধান উপাদানসমূহ:

• BrowserRouter: অ্যাপ্লিকেশনের জন্য কভার, যা API History ব্যবহার করে URL-সিঙ্ক্রোনাইজেশন করে।
• Routes: রুট নির্ধারণের জন্য কন্টেইনার।
• Route: URL এবং উপাদানের মধ্যে সামঞ্জস্য নির্ধারণ করে।
• Link: লিঙ্ক তৈরি করার জন্য উপাদান, যা পৃষ্ঠার পুনরায় লোড এড়ায়।
• useNavigate: প্রোগ্রাম্যাটিক নেভিগেশনের জন্য হুক।
• useParams: URL থেকে রুট প্যারামিটারগুলি বের করার জন্য হুক।

ব্যবহার উদাহরণ:

// App.js
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">মূল পৃষ্ঠা</Link> {' '}
        <Link to="/about">আমাদের সম্পর্কে</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        {/* ডাইনামিক রাউটের উদাহরণ */}
        {/* <Route path="/users/:userId" element={<UserProfile />} /> */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;