React Router DOM ইনস্টলেশন এবং সেটআপ

React Router DOM হল React অ্যাপ্লিকেশনে রাউটিং সিস্টেম ইনস্টল করার জন্য ব্যবহৃত একটি লাইব্রেরি। এটি আপনাকে React অ্যাপ্লিকেশনে পেজ নেভিগেশন বা URL রাউটিং সিস্টেম সেটআপ করতে সহায়তা করে। React Router DOM ব্যবহার করে আপনি সহজেই এক পেজ অ্যাপ্লিকেশন (SPA) তৈরি করতে পারেন, যেখানে পেজ পরিবর্তনের জন্য সম্পূর্ণ পেজ রিফ্রেশ ছাড়াই নেভিগেট করা সম্ভব।

React Router DOM ইনস্টলেশন

React Router DOM ইনস্টল করার জন্য আপনি npm বা yarn প্যাকেজ ম্যানেজার ব্যবহার করতে পারেন। প্রথমে আপনার React প্রজেক্টে React Router DOM প্যাকেজটি ইনস্টল করতে হবে।

১. NPM দিয়ে ইনস্টলেশন

npm install react-router-dom

২. Yarn দিয়ে ইনস্টলেশন

yarn add react-router-dom

এটি ইনস্টল করার পর, React অ্যাপ্লিকেশনটির মধ্যে রাউটিং ব্যবহার করতে পারবেন।

React Router DOM সেটআপ

React Router DOM এর সেটআপের জন্য কিছু মৌলিক কম্পোনেন্ট যেমন BrowserRouter, Route, Switch, এবং Link ব্যবহার করতে হয়। এখানে প্রতিটি কম্পোনেন্টের ভূমিকা ব্যাখ্যা করা হয়েছে:

• BrowserRouter: এটি রাউটিং সিস্টেমের মূল উপাদান। এটি অ্যাপের পুরো কাঠামোকে রাউটিং করতে সক্ষম করে।
• Route: এটি URL প্যাথ এবং কম্পোনেন্ট ম্যাপ করতে ব্যবহৃত হয়। প্রতিটি Route একটি নির্দিষ্ট পাথ এবং তার সাথে সম্পর্কিত কম্পোনেন্ট রেন্ডার করে।
• Switch: এটি একাধিক Route এর মধ্যে শুধুমাত্র একটি রুট রেন্ডার করে।
• Link: এটি React এর মধ্যে নেভিগেশনের জন্য ব্যবহৃত হয়, যাতে পেজ রিফ্রেশ না হয়ে নেভিগেট করা যায়।

React Router DOM সেটআপ: উদাহরণ

১. App.js ফাইলে React Router DOM সেটআপ

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

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

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

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

function App() {
  return (
    <Router>
      <div>
        {/* নেভিগেশন লিংক */}
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>

        {/* রাউটিং সিস্টেম */}
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

ব্যাখ্যা:

• <Router>: এই কম্পোনেন্টটি পুরো অ্যাপ্লিকেশনকে রাউটিং সিস্টেমের অধীনে রাখে।
• <Link>: এই কম্পোনেন্টগুলি ব্যবহারকারীদের বিভিন্ন পেজে নেভিগেট করার জন্য ব্যবহৃত হয়। এটি href অ্যাট্রিবিউটের পরিবর্তে to অ্যাট্রিবিউট ব্যবহার করে।
• <Route>: প্রতিটি রুট একটি নির্দিষ্ট পাথ এবং কম্পোনেন্টকে ম্যাপ করে। exact অ্যাট্রিবিউটটি ব্যবহার করলে পাথ পুরোপুরি মিলে গেলে তবেই কম্পোনেন্ট রেন্ডার হবে।
• <Switch>: এটি ব্যবহার করার মাধ্যমে নিশ্চিত করা হয় যে, শুধুমাত্র প্রথম মেলানো রুট রেন্ডার হবে, অর্থাৎ একাধিক রুটের মধ্যে একাধিক রেন্ডার হওয়ার সম্ভাবনা প্রতিরোধ হয়।

React Router DOM-এর কিছু গুরুত্বপূর্ণ বৈশিষ্ট্য

১. Dynamic Routing

React Router DOM-এর মাধ্যমে আপনি ডাইনামিক রাউটিং করতে পারেন। অর্থাৎ, রাউট পাথের মধ্যে ডাইনামিক ভ্যালু যেমন user/:id ব্যবহার করতে পারেন, যেখানে :id একটি ভ্যারিয়েবল হবে এবং সেই ভ্যারিয়েবল অনুযায়ী রেন্ডার করা হবে।

উদাহরণ:

function UserProfile({ match }) {
  return <h2>User ID: {match.params.id}</h2>;
}

<Route path="/user/:id" component={UserProfile} />

২. Nested Routing

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

উদাহরণ:

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      <Route path="/dashboard/settings" component={Settings} />
    </div>
  );
}

৩. Redirecting

React Router DOM-এ Redirect কম্পোনেন্ট ব্যবহার করে ইউজারকে একটি রাউট থেকে অন্য রাউটে রিডিরেক্ট করা সম্ভব।

উদাহরণ:

import { Redirect } from 'react-router-dom';

function NotFound() {
  return <Redirect to="/" />;
}

এখানে, ইউজার যখন একটি অবৈধ রুটে যাবে, তখন তাকে স্বয়ংক্রিয়ভাবে হোম পেজে রিডিরেক্ট করা হবে।

সারাংশ

React Router DOM ইনস্টল ও সেটআপ করে আপনি React অ্যাপ্লিকেশনে বিভিন্ন পেজে নেভিগেশন বা রাউটিং ব্যবস্থা তৈরি করতে পারেন। এর মাধ্যমে আপনি একাধিক রুট পাথ, ডাইনামিক রাউটিং, নেস্টেড রাউটিং এবং ইউজারের ইন্টারঅ্যাকশন অনুযায়ী কম্পোনেন্ট রেন্ডার করতে পারেন। React Router DOM-এর সাহায্যে SPA (Single Page Application) তৈরি করা অনেক সহজ হয়ে যায়।