React Router কী এবং কেন প্রয়োজন?

React Router কী?

React Router হল একটি লাইব্রেরি যা React অ্যাপ্লিকেশনগুলোর মধ্যে রাউটিং পরিচালনা করতে ব্যবহৃত হয়। রাউটিং হল একটি প্রক্রিয়া যেখানে আপনি নির্দিষ্ট URL এর ভিত্তিতে ভিন্ন ভিন্ন কম্পোনেন্ট বা পেজ দেখানোর ব্যবস্থা করেন। React Router আপনাকে Single Page Application (SPA)-এ বিভিন্ন URL এর মাধ্যমে ভিন্ন ভিন্ন UI রেন্ডার করার সুযোগ দেয়, কিন্তু তা করার জন্য পুরো পেজটি আবার লোড করতে হয় না।

React Router বিভিন্ন রুট বা পাথের জন্য কম্পোনেন্ট রেন্ডার করার জন্য প্রয়োজনীয় ফাংশনালিটি সরবরাহ করে। এটি Declarative Routing পদ্ধতি অনুসরণ করে, যেখানে আপনি রাউটগুলি সহজেই ডিফাইন করতে পারেন এবং প্রতিটি রুটের জন্য প্রয়োজনীয় কম্পোনেন্ট রেন্ডার করতে পারেন।

React Router কেন প্রয়োজন?

React-এর মূল ধারণা হল Single Page Application (SPA) তৈরি করা, যেখানে পুরো পেজটি আবার রিফ্রেশ না করেই ইউজার ইন্টারঅ্যাকশনের মাধ্যমে কনটেন্ট পরিবর্তন হয়। তবে, SPA অ্যাপ্লিকেশনে অনেক পেজ থাকে, এবং প্রতিটি পেজের নিজস্ব URL থাকতে পারে, যা সঠিকভাবে পরিচালনা করতে রাউটিং প্রয়োজন।

React Router এই কাজটি সম্পাদন করে, কারণ React-এর মধ্যে রাউটিং মানে মূলত URL অনুযায়ী নির্দিষ্ট কম্পোনেন্ট রেন্ডার করা। React Router এই ধরনের URL ম্যানেজমেন্ট এবং রাউটিং খুবই সহজ করে তোলে।

React Router এর ব্যবহার

১. Declarative Routing

React Router ব্যবহার করার মাধ্যমে আপনি declarative (ঘোষণামূলক) রাউটিং করতে পারেন, যেখানে আপনি প্রতিটি রুট নির্দিষ্ট করে দেন এবং সেই অনুযায়ী UI রেন্ডার হয়।

প্রাথমিক উদাহরণ:

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function Home() {
  return <h2>Home Page</h2>;
}

function About() {
  return <h2>About Page</h2>;
}

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>

      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

export default App;

এখানে, BrowserRouter, Route, এবং Link উপাদানগুলি React Router থেকে আমদানি করা হয়েছে এবং ব্যবহার করা হয়েছে। Route উপাদানটি URL অনুযায়ী সংশ্লিষ্ট কম্পোনেন্ট রেন্ডার করবে।

২. Dynamic Routing

React Router আপনাকে dynamic routing করতে সহায়তা করে, যেখানে URL প্যারামিটার ব্যবহার করে ডাইনামিক ডেটা রেন্ডার করা সম্ভব।

উদাহরণ:

import React from 'react';
import { BrowserRouter as Router, Route, useParams } from 'react-router-dom';

function User() {
  const { id } = useParams();
  return <h2>User ID: {id}</h2>;
}

function App() {
  return (
    <Router>
      <Route path="/user/:id" component={User} />
    </Router>
  );
}

export default App;

এখানে, :id হল একটি প্যারামিটার, যা URL এর অংশ হিসেবে পাস করা হয় এবং useParams হুকের মাধ্যমে তা অ্যাক্সেস করা হয়।

৩. Nested Routing

React Router আপনাকে নেস্টেড রাউটিং (Nested Routing) করতে দেয়, যেখানে একটি কম্পোনেন্টের ভিতরে আরও রাউট তৈরি করা যায়।

উদাহরণ:

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function Home() {
  return <h2>Home Page</h2>;
}

function About() {
  return <div>
    <h2>About Page</h2>
    <Route path="/about/team" component={Team} />
    <Route path="/about/company" component={Company} />
  </div>;
}

function Team() {
  return <h3>Team Section</h3>;
}

function Company() {
  return <h3>Company Section</h3>;
}

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>

      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

export default App;

এখানে, About কম্পোনেন্টের ভিতরে আরও দুটি রুট Team এবং Company তৈরি করা হয়েছে, যেগুলি About পেজের অংশ হিসেবে রেন্ডার হবে।

React Router এর কিছু প্রধান ফিচার

১. Declarative Routing

React Router ব্যবহার করলে, আপনি সহজেই যেকোনো URL এর জন্য ডাইনামিক রেন্ডারিং করতে পারেন।

২. Nested Routes

একটি কম্পোনেন্টের মধ্যে আরও কম্পোনেন্ট বা রাউট পাস করে নেস্টেড রাউট তৈরি করতে পারবেন।

৩. Dynamic Routing

React Router ডাইনামিক রাউটিং সাপোর্ট করে, যেখানে URL প্যারামিটার ব্যবহার করে ডেটা রেন্ডার করা হয়।

৪. Programmatic Navigation

React Router-এ প্রোগ্রামেটিক্যালি (কোডের মাধ্যমে) URL পরিবর্তন করা যায়। এটি useHistory বা useNavigate হুকের মাধ্যমে করা যায়।

৫. Lazy Loading

React Router ভ্যালিড রাউটগুলোকে lazy load করার সুবিধা দেয়, যা অ্যাপ্লিকেশন লোডিং স্পিড বাড়াতে সহায়তা করে।

React Router কেন প্রয়োজন?

1. Single Page Application (SPA) এর জন্য রাউটিং: React অ্যাপ্লিকেশনে একটি Single Page Application নির্মাণ করতে হলে রাউটিং খুবই গুরুত্বপূর্ণ, যেখানে ব্যবহারকারী যেকোনো পেজে যেতে পারে কিন্তু পুরো পেজ লোড না হয়ে শুধুমাত্র সংশ্লিষ্ট কম্পোনেন্ট রেন্ডার হয়।
2. ভিন্ন ভিন্ন UI দেখানো: React Router আপনাকে URL ভিত্তিক বিভিন্ন UI রেন্ডার করার সুবিধা দেয়, যা UI এর পরিবর্তন বা ফ্লো সহজ করে।
3. ডাইনামিক ডেটা রেন্ডারিং: React Router আপনাকে URL প্যারামিটার ব্যবহার করে ডাইনামিক ডেটা রেন্ডার করার সুযোগ দেয়।
4. কোড সেপারেশন: React Router ব্যবহার করার মাধ্যমে বিভিন্ন পেজ বা কম্পোনেন্টকে আলাদা আলাদা রাউট হিসাবে সাজানো যায়, যা অ্যাপ্লিকেশনটির কোড সেপারেশন সহজ করে।

React Router একটি অপরিহার্য টুল, যা React অ্যাপ্লিকেশনের মধ্যে রাউটিং পরিচালনার ক্ষেত্রে গুরুত্বপূর্ণ ভূমিকা পালন করে।