React Router এর মাধ্যমে Navigation

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

React Router ব্যবহার করে আপনি React অ্যাপ্লিকেশনেও একাধিক পেজের মতো নেভিগেশন করতে পারেন, এবং ইউজারের ইন্টারঅ্যাকশনের ভিত্তিতে কম্পোনেন্ট পরিবর্তন করে নতুন কন্টেন্ট রেন্ডার করতে পারেন।

React Router কী?

React Router হল একটি লাইব্রেরি যা URL Routing এর মাধ্যমে আপনার React অ্যাপ্লিকেশনকে বিভিন্ন পেজে বিভক্ত করার কাজ করে। এটি আপনাকে অ্যাপ্লিকেশনের ভিন্ন ভিন্ন ভিউ বা পেজ একে অপর থেকে আলাদা করতে সহায়তা করে এবং React-এ ব্যবহৃত single-page application কাঠামো বজায় রাখে।

React Router সাধারণত দুটি মূল কনসেপ্টে কাজ করে:

1. Route: এটি একটি URL-প্যাটার্ন এবং একটি কম্পোনেন্টের মধ্যে সম্পর্ক স্থাপন করে।
2. Link: এটি একটি লিঙ্ক তৈরি করে যা অন্য রাউটের দিকে নেভিগেট করে।

React Router এর মাধ্যমে Navigation করার পদ্ধতি

১. React Router ইনস্টলেশন

প্রথমে আপনাকে React Router ইনস্টল করতে হবে। এটি ইনস্টল করতে, আপনি নীচের কমান্ডটি ব্যবহার করতে পারেন:

npm install react-router-dom

২. React Router ব্যবহার করে Navigation তৈরি করা

React Router ব্যবহার করতে প্রথমেই আপনাকে অ্যাপ্লিকেশনটির মূল ফাইল (যেমন App.js) এ BrowserRouter দিয়ে আপনার রাউটার সেটআপ করতে হবে।

৩. Routing এবং Link এর মাধ্যমে Navigation

React Router-এ Route এবং Link দুটি প্রধান উপাদান ব্যবহৃত হয়।

• BrowserRouter: এটি রাউটিংয়ের জন্য একটি র‍্যাপার কম্পোনেন্ট যা আপনার অ্যাপের চারপাশে থাকবে।
• Route: এটি URL পাথ এবং কম্পোনেন্টের মধ্যে সম্পর্ক স্থাপন করে।
• Link: এটি একটি লিঙ্ক তৈরি করে, যা ইউজারকে অন্য রাউটের দিকে নেভিগেট করতে সাহায্য করে।

উদাহরণ:

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>
          {/* Navigation Links */}
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>

        {/* Routing */}
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

এখানে:

• BrowserRouter (অথবা Router): এটি অ্যাপ্লিকেশনকে রাউটিং ফিচারের জন্য প্রস্তুত করে।
• Route: এটি পাথ অনুযায়ী একটি নির্দিষ্ট কম্পোনেন্ট রেন্ডার করে। exact অ্যাট্রিবিউটটি শুধুমাত্র সঠিক URL মিলে গেলে রেন্ডার হয়।
• Link: এটি পেজে লিঙ্ক তৈরি করে, যা ক্লিক করলে ব্রাউজারকে অন্য রাউটের দিকে নেভিগেট করতে সাহায্য করে।

৪. Switch কম্পোনেন্ট

Switch কম্পোনেন্টটি React Router 4 থেকে নতুনভাবে এসেছে। এটি নিশ্চিত করে যে শুধুমাত্র একটি রাউট একসাথে রেন্ডার হবে। আপনি যদি একাধিক রাউটের পাথ একইরকম হয়, তাহলে Switch তাদের মধ্যে সঠিক রাউটটি রেন্ডার করবে।

React Router-এর আরও সুবিধা

১. Dynamic Routing

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

<Route path="/post/:id" component={Post} />

এখানে :id হল একটি প্যারামিটার, যা URL-এ dinamicভাবে পরিবর্তিত হবে। যেমন: /post/1, /post/2 ইত্যাদি।

২. Programmatic Navigation

কখনও কখনও, আপনাকে কোডের মাধ্যমে প্রোগ্রামেটিক্যালি নেভিগেট করতে হতে পারে। React Router-এ useHistory হুক ব্যবহার করে এটি সম্ভব:

import React from 'react';
import { useHistory } from 'react-router-dom';

function MyComponent() {
  const history = useHistory();

  const navigateToHome = () => {
    history.push('/');
  };

  return (
    <div>
      <button onClick={navigateToHome}>Go to Home</button>
    </div>
  );
}

এখানে, history.push('/') ব্যবহার করে আপনি প্রোগ্রামেটিক্যালি / রাউটে নেভিগেট করতে পারবেন।

৩. Redirect

React Router-এ আপনি যদি কোনও রাউট থেকে অন্য রাউটে রিডাইরেক্ট করতে চান, তাহলে Redirect কম্পোনেন্ট ব্যবহার করতে পারেন:

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

function LoginPage() {
  const isLoggedIn = false;  // উদাহরণস্বরূপ, একটি ভ্যারিয়েবল
  if (!isLoggedIn) {
    return <Redirect to="/login" />;
  }

  return <h1>Welcome!</h1>;
}

এখানে, যদি ইউজার লগ ইন না থাকে, তাহলে তারা স্বয়ংক্রিয়ভাবে /login পেজে রিডাইরেক্ট হবে।

সারাংশ

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

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 অ্যাপ্লিকেশনের মধ্যে রাউটিং পরিচালনার ক্ষেত্রে গুরুত্বপূর্ণ ভূমিকা পালন করে।

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) তৈরি করা অনেক সহজ হয়ে যায়।

ReactJS-এ React Router ব্যবহার করে রাউটিং পরিচালনা করা হয়। React Router আপনাকে একাধিক পেজ বা ভিউয়ের মধ্যে নেভিগেশন তৈরি করতে সহায়ক হয়, এবং এটি কম্পোনেন্টের মধ্যে ডাইনামিকভাবে পেজ পরিবর্তন করার সুবিধা দেয়। React Router দুটি প্রধান সংস্করণে উপলব্ধ: React Router DOM (ব্রাউজার ভিত্তিক রাউটিং) এবং React Router Native (মোবাইল অ্যাপ্লিকেশনের জন্য)। এখানে আমরা React Router DOM এর মাধ্যমে Routing এবং Nested Routes তৈরি করার পদ্ধতি দেখব।

React Router এর ইনস্টলেশন

প্রথমে, আপনাকে React Router ইনস্টল করতে হবে। React Router ইনস্টল করার জন্য NPM বা Yarn ব্যবহার করা যায়:

npm install react-router-dom

এবং Yarn ব্যবহার করলে:

yarn add react-router-dom

ReactJS-এ Routing তৈরি করা

React Router ব্যবহার করে আপনি সহজেই বিভিন্ন কম্পোনেন্টে নেভিগেট করতে পারেন। প্রধান কম্পোনেন্টে BrowserRouter, Route, এবং Link ইত্যাদি ব্যবহার করা হয়।

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 <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>

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

export default App;

এখানে, BrowserRouter হল রুটিংয়ের মূল কম্পোনেন্ট যা আপনার অ্যাপ্লিকেশনকে রাউটিং তথ্য প্রদান করে। Route কম্পোনেন্টটি পাথ অনুযায়ী নির্দিষ্ট কম্পোনেন্ট রেন্ডার করে, এবং Link কম্পোনেন্টটি নেভিগেশন লিঙ্ক তৈরি করতে ব্যবহৃত হয়।

Nested Routes তৈরি করা

ReactJS-এ Nested Routes তৈরি করার মাধ্যমে আপনি একটি রাউটের ভিতরে আরেকটি রাউট বা কম্পোনেন্ট রেন্ডার করতে পারেন। এটি একটি সাধারণ উপায় যখন আপনার অ্যাপ্লিকেশনে একাধিক স্তরের পেজ বা ভিউ থাকে। Nested Routes তৈরি করতে Route কম্পোনেন্টের মধ্যে অন্য Route কম্পোনেন্ট ব্যবহার করা হয়।

Nested Routes উদাহরণ:

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

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

function About() {
  return (
    <div>
      <h2>About Page</h2>
      <ul>
        <li>
          <Link to="/about/team">Our Team</Link>
        </li>
        <li>
          <Link to="/about/history">Our History</Link>
        </li>
      </ul>
      <Route path="/about/team" component={Team} />
      <Route path="/about/history" component={History} />
    </div>
  );
}

// Child Components (Nested Routes)
function Team() {
  return <h3>Meet Our Team</h3>;
}

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

function App() {
  return (
    <Router>
      <div>
        <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} />
      </div>
    </Router>
  );
}

export default App;

এখানে, About পেজের মধ্যে দুটি Nested Route তৈরি করা হয়েছে: একটি Team পেজ এবং আরেকটি History পেজ। যখন আপনি About পেজে যান, তখন আপনি ঐ পেজের ভিতরে আরও সাব-রাউট দেখতে পারবেন, যেমন Our Team এবং Our History।

ReactJS-এ Nested Route-এর পরামর্শ:

1. Route Order: React Router-এ Route গুলি একটি নির্দিষ্ট অর্ডারে রেন্ডার হয়। সাধারণত, আপনি সবচেয়ে সাধারণ রাউটগুলিকে প্রথমে এবং Nested রাউটগুলিকে পরে রাখবেন।

2. Exact Prop: যখন আপনি একাধিক রাউট পাথ ব্যবহার করবেন, তখন exact প্রপস ব্যবহার করুন যাতে নিশ্চিত করা যায় যে পাথটি ঠিকমতো মিলে গেছে, অন্যথায় React Router অন্য কোন রাউটেও ম্যাচ করে ফেলতে পারে।

   <Route path="/" exact component={Home} />
   

3. React Router v6: React Router-এর নতুন ভার্সন (v6) বেশ কিছু নতুন পরিবর্তন এনেছে, যেমন Switch কম্পোনেন্টের পরিবর্তে Routes কম্পোনেন্ট ব্যবহার, এবং component প্রপসের পরিবর্তে element প্রপস ব্যবহৃত হয়।

React Router v6 Nested Routes উদাহরণ

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

// Parent Component
function About() {
  return (
    <div>
      <h2>About Page</h2>
      <ul>
        <li>
          <Link to="team">Our Team</Link>
        </li>
        <li>
          <Link to="history">Our History</Link>
        </li>
      </ul>

      <Routes>
        <Route path="team" element={<Team />} />
        <Route path="history" element={<History />} />
      </Routes>
    </div>
  );
}

// Child Components
function Team() {
  return <h3>Meet Our Team</h3>;
}

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

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

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about/*" element={<About />} />
      </Routes>
    </Router>
  );
}

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

export default App;

এখানে, React Router v6 এর জন্য Routes এবং element প্রপস ব্যবহার করা হয়েছে। * ব্যবহার করে সাব-পাথ যোগ করা হয়েছে।

সারাংশ

ReactJS-এ Routing এবং Nested Routes ব্যবহারের মাধ্যমে একাধিক পেজ এবং ডাইনামিক নেভিগেশন তৈরি করা যায়। React Router ডমিনেট করা সিস্টেম ব্যবহার করে কম্পোনেন্টের মধ্যে সহজেই নেভিগেশন পরিচালনা করা সম্ভব। Nested Routes ব্যবহারের মাধ্যমে পেজের ভিতরে আরও ডাইনামিক রাউট তৈরি করা যায়, যা React অ্যাপ্লিকেশনকে আরও ফ্লেক্সিবল এবং ব্যবহারযোগ্য করে তোলে।

ReactJS-এ সিঙ্গেল পেজ অ্যাপ্লিকেশন (SPA) তৈরি করার সময় বিভিন্ন পৃষ্ঠার মধ্যে নেভিগেশন পরিচালনা করার জন্য Link এবং NavLink কম্পোনেন্ট ব্যবহার করা হয়। এই কম্পোনেন্ট দুটি React Router লাইব্রেরির অংশ, যা URL পরিবর্তন এবং পৃষ্ঠার রেন্ডারিং করে, তবে পেজটি সম্পূর্ণভাবে পুনরায় লোড না করে। এর ফলে অ্যাপ্লিকেশন দ্রুত ও আরও ব্যবহারকারী-বান্ধব হয়ে ওঠে।

Link কম্পোনেন্ট

React Router-এর Link কম্পোনেন্ট একটি প্রাথমিক নেভিগেশন উপকরণ, যা পেজের মধ্যে ভিজ্যুয়াল নেভিগেশন করতে সাহায্য করে। এটি HTML <a> ট্যাগের মতো কাজ করে, তবে এটি শুধুমাত্র URL পরিবর্তন করে এবং React অ্যাপ্লিকেশনটির UI পুনরায় রেন্ডার করে, কিন্তু পেজ সম্পূর্ণরূপে রিলোড হয় না।

Link এর বৈশিষ্ট্য

• পেজ রিলোড বন্ধ করে: সাধারণ HTML <a> ট্যাগ ব্যবহার করলে ব্রাউজার পেজ রিলোড করে, কিন্তু Link কম্পোনেন্ট তা করে না, তাই অ্যাপ্লিকেশন দ্রুত চলে।
• React Router-এর রাউটিং ফিচার: to প্রপার্টির মাধ্যমে আপনি যেই রাউটের দিকে নেভিগেট করতে চান, তা উল্লেখ করতে পারবেন।

Link ব্যবহারের উদাহরণ

import React from 'react';
import { Link } from 'react-router-dom';

function Navigation() {
  return (
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/contact">Contact</Link></li>
      </ul>
    </div>
  );
}

export default Navigation;

এখানে, Link কম্পোনেন্টটি to প্রপস ব্যবহার করে নেভিগেট করবে। উদাহরণস্বরূপ, /about লিঙ্কটি ক্লিক করলে React অ্যাপ্লিকেশনটি সেই পৃষ্ঠাতে চলে যাবে, কিন্তু পুরো পেজটি পুনরায় লোড হবে না।

NavLink কম্পোনেন্ট

NavLink কম্পোনেন্টও React Router-এর অংশ, যা Link এর মতো কাজ করে, তবে এতে অতিরিক্ত কিছু বৈশিষ্ট্য রয়েছে। বিশেষত, NavLink কম্পোনেন্টটি অ্যাকটিভ লিঙ্ক চিহ্নিত করতে ব্যবহার করা হয়। এটি স্বয়ংক্রিয়ভাবে সেই লিঙ্কের স্টাইল পরিবর্তন করে, যেটি বর্তমানে অ্যাকটিভ বা নির্বাচিত থাকে।

NavLink এর বৈশিষ্ট্য

• অ্যাকটিভ স্টাইলিং: যখন কোনো NavLink কম্পোনেন্ট অ্যাকটিভ থাকে, তখন এটি স্বয়ংক্রিয়ভাবে CSS ক্লাস (active ক্লাস) অ্যাপ্লাই করে, যার মাধ্যমে আপনি CSS স্টাইল পরিবর্তন করতে পারেন।
• এডভান্সড ফিচার: NavLink কম্পোনেন্টের মাধ্যমে, আপনি আরো বিস্তারিত কনফিগারেশন যেমন activeClassName, activeStyle, exact ইত্যাদি ব্যবহার করতে পারেন।

NavLink ব্যবহারের উদাহরণ

import React from 'react';
import { NavLink } from 'react-router-dom';

function Navigation() {
  return (
    <div>
      <ul>
        <li><NavLink to="/" exact activeClassName="active-link">Home</NavLink></li>
        <li><NavLink to="/about" activeClassName="active-link">About</NavLink></li>
        <li><NavLink to="/contact" activeClassName="active-link">Contact</NavLink></li>
      </ul>
    </div>
  );
}

export default Navigation;

এখানে, NavLink কম্পোনেন্ট ব্যবহার করা হয়েছে। যখন ইউজার কোনও লিঙ্কে ক্লিক করে, তখন সেই লিঙ্কে active ক্লাস যোগ হবে।

অ্যাকটিভ লিঙ্ক স্টাইলিং

.active-link {
  font-weight: bold;
  color: green;
}

এখানে, যখন কোনো লিঙ্ক অ্যাকটিভ হবে, তখন তার স্টাইল পরিবর্তিত হবে এবং active-link ক্লাসটি অ্যাপ্লাই হবে, যার মাধ্যমে লিঙ্কটির রঙ এবং ফন্ট বোল্ড হবে।

Link এবং NavLink এর মধ্যে পার্থক্য

উপসংহার

Link এবং NavLink ReactJS অ্যাপ্লিকেশনে নেভিগেশন পরিচালনা করার জন্য খুবই গুরুত্বপূর্ণ কম্পোনেন্ট। Link ব্যবহার করে আপনি অ্যাপ্লিকেশন এর মধ্যে পেজ নেভিগেট করতে পারেন, যেখানে NavLink অ্যাকটিভ লিঙ্কগুলোর জন্য বিশেষভাবে উপযোগী, যেখানে আপনি একটি লিঙ্কের নির্বাচিত অবস্থা হাইলাইট করতে পারেন। যখন আপনার অ্যাপ্লিকেশনে বিভিন্ন লিঙ্কের স্টাইল পরিবর্তন বা হাইলাইট করার প্রয়োজন হয়, তখন NavLink ব্যবহার করা সবচেয়ে উপযুক্ত।