রিয়েক্ট রাউটার একটি লাইব্রেরি যা রিয়েক্ট (React) ফ্রেমওয়ার্কে ব্যবহার হয়। এটি ওয়েব অ্যাপ্লিকেশনের ইন্টারফেস এবং কোম্পোনেন্টগুলির নেভিগেশন ব্যবস্থা করতে সাহায্য করে। এটি অ্যাপ্লিকেশনের URL-গুলি প্রস্তুত করতে এবং ব্যবহারকারীকে বিভিন্ন পৃষ্ঠাগুলি মধ্যে নেভিগেট করতে ব্যবহৃত হয়।

React router v5 vs v6

রিয়েক্ট রাউটার version 5:

রিয়েক্ট রাউটার v5 একটি জনপ্রিয় রাউটিং লাইব্রেরি ছিল, যা রিয়েক্ট অ্যাপ্লিকেশনের নেভিগেশন ব্যবস্থা পরিচালনা করতে ব্যবহৃত হত। এই সংস্করণে নীচের ধরণের ফাংশনালিটি ছিল:

• BrowserRouter: URL এর পথের উপর নির্ভর করে রাউট প্রদান করে।

• Route: একটি রাউট সেটআপ করার জন্য ব্যবহৃত হত, যা নির্দিষ্ট URL এর জন্য একটি কম্পোনেন্ট প্রদান করে।

• Link: নেভিগেশনের জন্য ব্যবহৃত হত, যা একটি লিঙ্ক প্রদান করে এবং ব্যবহারকারীকে অন্য পেজে নিয়ে যেতে দেয়।

• Switch: প্রথম মিল বা পাস বক্স মধ্যে প্রদর্শিত হবে, যাতে একই পথে একাধিক রাউট না থাকে।

রিয়েক্ট রাউটার version 6:

এই সংস্করণে ব্যাকওয়ার্ড ক্যাম্প্যাটিবিলিটি নিতে লক্ষ্য রাখে, যাতে পূর্বের সংস্করণ থেকে আসা ব্যবহারকারীদের জন্য সুবিধা থাকে। এই সংস্করণে মূলত নিম্নলিখিত নতুন ফিচারগুলি সম্মিলিত করা হয়েছে:

• Routes: এটি একটি নতুন API, যা JSX ব্যবহার করে রাউট সেটআপ করার জন্য ব্যবহৃত হয়।

• useRoutes: এটি কাস্টম হুক, যা আপনাকে স্বাধীনভাবে রাউট ব্যবস্থা কনফিগার করতে দেয়।

• Outlet: এটি একটি কন্টেইনার কম্পোনেন্ট, যা বর্তমান রাউটের কন্টেন্ট প্রদর্শন করে।

• Link: নেভিগেশন ব্যবহারের জন্য এই কম্পোনেন্টটি ব্যবহার হয়, যা ব্যবহারকারীকে অন্য পেজে নিয়ে যেতে সাহায্য করে।

Basic Knowledge of react-router-dom

1. রাউটিং: রিয়েক্ট রাউটার দ্বারা আপনি আপনার অ্যাপ্লিকেশনে বিভিন্ন পৃষ্ঠাগুলির জন্য URL নির্ধারণ করতে পারেন। এই URL-গুলির সাথে মিলে যখন ব্যবহারকারী একটি পৃষ্ঠা চেয়ে, তাদের সঠিক কোম্পোনেন্ট দেখানো হয়।

2. নেস্টেড রাউটিং: রিয়েক্ট রাউটার দ্বারা আপনি একটি পৃষ্ঠা আরেকটি পৃষ্ঠার মধ্যে নেস্ট করতে পারেন। এটি ব্যবহারকারীদের একটি সেকশন থেকে অন্যটি সেকশনে স্মুদ নেভিগেশন সরবরাহ করে।

3. প্যারামিটার পাস করা: আপনি রাউট লিংকে প্যারামিটার যোগ করতে পারেন, যা নিয়মিতভাবে পৃষ্ঠার উপর প্রভাব ফেলতে পারে।

4. প্রাইভেট রাউটিং: রিয়েক্ট রাউটার দ্বারা আপনি ব্যবহারকারীদের লগইন অবস্থা পর্যন্ত পৃষ্ঠাগুলি অ্যাক্সেস করতে অনুমতি দেওয়া সহজ করে তৈরি করতে পারেন।

5. প্রায়শই ব্যবহৃত কোম্পোনেন্ট: রিয়েক্ট রাউটার দ্বারা প্রায়শই ব্যবহৃত কোম্পোনেন্ট গুলি ব্যবহার করে, যা পৃষ্ঠাগুলির সাথে মিলে নেভিগেশন সম্পর্কিত লজিক প্রদান করে। সংক্ষেপে, রিয়েক্ট রাউটার রিয়েক্ট অ্যাপ্লিকেশনে নেভিগেশন সহায়ক করে এবং ব্যবহারকারীদের অ্যাপ্লিকেশনে স্মুদ ও কাস্টমাইজড নেভিগেশন সরবরাহ করে।

What we will get from react-router-dom package

রিয়েক্ট রাউটার ডমের মধ্যে আমরা যা যা পাই - BrowserRouter, Routes, Route, Navlink, Link, useNavigator, switch, redirect.

1. BrowserRouter: এটি একটি রিয়েক্ট রাউটার কনটেক্স্ট সরবরাহ করে এবং অ্যাপ্লিকেশনের পূর্ণ রাউটিং সিস্টেম শুরু করে।

2. Route: এই কোম্পোনেন্টটি নির্দিষ্ট URL এবং এটি সাথে মিলে যে কোম্পোনেন্ট প্রদর্শিত হবে তা নির্ধারণ করে।

3. Switch: এটি সাথে মিলা প্রথম <Route> প্রদর্শিত করে এবং URL সঙ্গে মিলে অন্য কোনও <Route> প্রদর্শিত করবে না। এটা রিয়েক্ট ১৮ তে ব্যবহার করার প্রয়োজন হয় না ।

4. Link: এটি একটি HTML <a> তত্ত্বটি অনুসরণ করে, কিন্তু পৃষ্ঠাগুলি পুনরায় লোড না করে এবং রিয়েক্ট রাউটার নেভিগেশন সিস্টেম সমর্থন করে।

5. NavLink: এটি <Link> এর মতো, কিন্তু বর্তমান URL সঙ্গে মিলানোর জন্য অতিরিক্ত স্টাইল সরবরাহ করে যাতে বর্তমান পৃষ্ঠা সঙ্গে মিলে নেভিগেশনের স্থিতি নির্দেশ করা যায়।

6. Redirect: এই কোম্পোনেন্টটি রিডাইরেক্ট করার জন্য ব্যবহার করা হয়, অর্থাৎ একটি URL থেকে অন্য URL এ নিয়ে যাওয়ার জন্য।

7. Route: Route কোম্পোনেন্টে প্রদর্শিত কোম্পোনেন্টে প্যারামিটার পাস করার জন্য ব্যবহার করা হয়, যা URL এর অংশ হিসেবে প্রদান করা হয়।

8. useNavigator: রিয়েক্ট রাউটার ডমের "useNavigator" ফাংশনটি রিয়েক্ট রাউটার ডম লাইব্রেরির একটি মেথড যা ব্রাউজারের বার্তা হিসেবে একটি নতুন লোকেশনে নেভিগেট করার জন্য ব্যবহৃত হয়। এটি নতুন URL এবং ব্রাউজার ব্যাক বোতাম চাপার ফলে ক্রিয়া সম্পন্ন করে, যাতে ব্রাউজারের ইতিহাস ম্যানেজ হতে পারে এবং পূর্বে যান URL এবং লোকেশন দুটি সংরক্ষিত থাকে। এটি রিয়েক্ট ডম এ্যাপ্লিকেশনে একটি নতুন স্টেট ডেটা সেট করতে ও ব্রাউজার ইতিহাস ম্যানেজ করতে ব্যবহৃত হতে পারে। এই কোম্পোনেন্টগুলির মাধ্যমে রিয়েক্ট রাউটার অ্যাপ্লিকেশনে পৃষ্ঠাগুলির নেভিগেশন এবং সংক্ষিপ্ত URL ব্যবহার সহায়ক করে।

How to user react-router-dom

1. রিয়েক্ট রাউটার ডম ইনস্টল করা: প্রথমে, আপনার প্রজেক্ট ডিরেক্টরিতে যেটির মধ্যে রিয়েক্ট অ্যাপ্লিকেশনটি রয়েছে, সেখানে আসুন এবং নিম্নলিখিত কমান্ডটি দেন:

যদি আপনি npm ব্যবহার করেন:

npm install react-router-dom

যদি আপনি Yarn ব্যবহার করেন:

yarn add react-router-dom

2. রিয়েক্ট রাউটার ব্যবহার করা: আপনার প্রজেক্টে রিয়েক্ট রাউটার ডম ইনস্টল হওয়ার পর, আপনি এটি ব্যবহার করতে পারেন। আপনার মূল অ্যাপ্লিকেশনের ( app.jsx ) এপ্লিকেশনের মধ্যে রিয়েক্ট রাউটার কোম্পোনেন্টগুলি ব্যবহার করবেন, নিম্নলিখিত কোডগুলো অনুসরণ করতে পারেন:

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

উপরে যে কোডগুলো আমরা দেখতে পাচ্ছি এগুলো হচ্ছে একটি রিয়েক্ট কম্পোনেন্টের স্ট্রাকচার। প্রকৃতপক্ষে আমরা মূলত আমাদের রিয়েক্ট অ্যাপের ( app.jsx ) নামে যে কম্পনেন্ট অথবা ফাইলটি তাকে তার মধ্যে রিয়েক্ট রাউটার ডোম ইউজ করে, ইউজ করে তা না আমরা ওইখানে ডিফাইন করে দেই যে কোন ইউআরএল এ কোন কোম্পানির টা আমাদের ব্রাউজার দেখাবে। এবং উপরের কোডে এটাই দেখানো হয়েছে।

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

ব্যাস হয়ে গেছে আমরা এভাবে অনেকগুলা রাউট নিয়ে ঠিক সেমভাবে পাথের মধ্যে আমাদের বলতে গেলে আমরা যে পাতে যে পেজটা দেখাতে চাই ওই পাথটা দিয়ে তারপর এলিমেন্ট এর মধ্যে আমরা ওই পেজটার কোম্পানি ডিফাইন করে দিব এবং এভাবে আমরা যতগুলো রাউট ইউজ করতে পারবো।