অ্যাডভান্সড রিঅ্যাক্ট রাউটার V6 টেকনিক: বেসিকের বাইরে যাওয়া

আমি আজকে আপনার সাথে কিছু উন্নত রিঅ্যাক্ট রাউটার কৌশল শেয়ার করতে পেরে সত্যিই উত্তেজিত। প্রতিক্রিয়া রাউটার একটি আশ্চর্যজনক টুল যা আমাদের প্রতিক্রিয়া অ্যাপ্লিকেশনগুলিতে গতিশীল এবং মসৃণ নেভিগেশন তৈরি করতে সক্ষম করে।

যদিও এটি সাধারণত মৌলিক রাউটিং প্রয়োজনের জন্য ব্যবহৃত হয়, সেখানে কিছু কম পরিচিত কৌশল রয়েছে যা আপনার রাউটিং ক্ষমতাকে সম্পূর্ণ নতুন স্তরে উন্নীত করতে পারে।

আজ, আমি আমার প্রিয় কয়েকটি ভাগ করব যা আমি সময়ের সাথে সাথে আবিষ্কার করেছি।

আমরা কভার করব:

1. কুখ্যাত 404 পৃষ্ঠা পরিচালনা করা।
2. বর্তমান রুট হাইলাইট করতে একটি সক্রিয় পৃষ্ঠা সূচক তৈরি করা হচ্ছে।
3. useNavigate এবং useLocation হুক ব্যবহার করা।

আপনি এই নিবন্ধটি পড়া শেষ করার সময়, আপনি এই উন্নত প্রতিক্রিয়া রাউটার কৌশলগুলির একটি শক্তিশালী উপলব্ধি পাবেন এবং আপনার নিজের প্রকল্পগুলিতে সেগুলি প্রয়োগ করতে আত্মবিশ্বাসী বোধ করবেন।

সুতরাং, আসুন সরাসরি ডুবে যাই এবং একসাথে আমাদের রাউটিং দক্ষতা উন্নত করি!

তুমি কী তৈরী? চল শুরু করি!

একটি 404 পৃষ্ঠা নিয়ে কাজ করা

বড় প্রকল্পগুলিতে কাজ করার সময়, খুঁজে পাওয়া যায় না এমন রুটের যত্ন নেওয়া অপরিহার্য। আমরা প্রায়ই এই রুটগুলিকে 404 রুট হিসাবে উল্লেখ করি কারণ সার্ভারে একটি নথি পাওয়া না গেলে তারা HTTP স্ট্যাটাস কোড 404 ফেরত দেয়।

যাইহোক, আপনি যদি একজন বিড়াল প্রেমী হন, তাহলে আপনি http.cat চেক আউট উপভোগ করতে পারেন।

এখন, চলুন একটি বিশেষ রুট তৈরি করার জন্য ডুব দেওয়া যাক যেটি যখনই ব্রাউজারে বর্তমান URL-এর সাথে মেলে না তখনই ট্রিগার হবে৷

 import {BrowserRouter, Routes, Route} from "react-router-dom"; function App() { return <BrowserRouter> <Routes> <Route path="/" element={<p>Landing page</p>}></Route> <Route path="/products" element={<p>Products page</p>}></Route> <Route path="*" element={<p>404 page</p>}></Route> </Routes> </BrowserRouter> }

প্রাথমিক পৃষ্ঠা অ্যাক্সেস করার সময় / , ব্যবহারকারীদের ল্যান্ডিং পৃষ্ঠায় নির্দেশিত করা হবে। /products পৃষ্ঠায় নেভিগেট করা তাদের পণ্য পৃষ্ঠায় নিয়ে যাবে। যাইহোক, যদি অন্য কোনও লিঙ্ক অ্যাক্সেস করা হয় যা একটি নির্দিষ্ট রুটের সাথে সঙ্গতিপূর্ণ নয়, 404 পৃষ্ঠাটি প্রদর্শিত হবে।

এই আচরণের পিছনে কারণ হল 404 পৃষ্ঠার জন্য একটি বিশেষায়িত <Route> বাস্তবায়ন, যেখানে পাথ বৈশিষ্ট্য * তে সেট করা আছে। এই কনফিগারেশনটি নিশ্চিত করে যে রিঅ্যাক্ট রাউটার একচেটিয়াভাবে এই রুটটি ব্যবহার করবে যখন অন্য কোন রুট মেলে না। 404 রুটের নির্দিষ্ট প্লেসমেন্ট অপ্রয়োজনীয় এবং এটির একটি অবিচ্ছেদ্য উপাদান হিসাবে <Routes>...</Routes> বিভাগের মধ্যে যে কোনও জায়গায় স্থাপন করা যেতে পারে।

সক্রিয় পৃষ্ঠা

অ্যাপগুলি ব্যবহারিক পদ্ধতিতে রুটগুলি ব্যবহার করতে পারে এমন আরেকটি উপায় হল মেনুতে বর্তমানে সক্রিয় পৃষ্ঠাটি হাইলাইট করা।

আসুন কল্পনা করুন আপনার দুটি লিঙ্ক সহ একটি নেভিগেশন মেনু আছে:

1. হোম - এই লিঙ্কটি ব্যবহারকারীকে মূল পৃষ্ঠায় নিয়ে যায় / ।

2. সম্পর্কে - এই লিঙ্কটি ব্যবহারকারীকে প্রায় /about পৃষ্ঠায় নিয়ে যায়।

   
   

রিঅ্যাক্ট রাউটারের সাহায্যে ব্যবহারকারী যখন /about রুটে থাকে তখন স্বয়ংক্রিয়ভাবে About লিঙ্ক হাইলাইট করা সম্ভব হয়। একইভাবে, ব্যবহারকারী যখন / রুটে থাকে তখন আপনি হোম লিঙ্কটি হাইলাইট করতে পারেন। সর্বোত্তম অংশ হল, আপনি জটিল শর্তাবলীর প্রয়োজন ছাড়াই এটি অর্জন করতে পারেন।

এটি কাজ করার জন্য এখানে একটি সহজ উপায়:

 import {NavLink} from "react-router-dom"; function getClassName({isActive}) { if (isActive) { return "active"; // CSS class } } function App() { return <ul> <li> <NavLink to="/" className={getClassName}>Home</NavLink> </li> <li> <NavLink to="/about" className={getClassName}>About</NavLink> </li> </ul> }

আপনি উপরে যে কোডটি দেখছেন তার active ক্লাস কাজ করতে কিছু CSS প্রয়োজন। সুতরাং, আমরা বর্তমানে সক্রিয় পৃষ্ঠার মেনু লিঙ্কটিকে সাহসী এবং আলাদা করে দেখানোর মাধ্যমে এটিকে উন্নত করতে পারি।

 .active { font-weight: bold; }

NavLink এলিমেন্টের className অ্যাট্রিবিউটে শুধুমাত্র একটি স্ট্রিংয়ের পরিবর্তে একটি ফাংশন গ্রহণ করার নমনীয়তা রয়েছে। আপনি যখন একটি ফাংশন ব্যবহার করার সিদ্ধান্ত নেন, তখন এটিকে একটি পরামিতি হিসাবে একটি অবজেক্ট দেওয়া হবে এবং এই অবজেক্টটিতে ইতিমধ্যেই isActive বৈশিষ্ট্য সেট করা থাকবে। ফাংশনের মধ্যে এই বৈশিষ্ট্যটি সহজে অ্যাক্সেস করতে, আমরা প্যারামিটারে {isActive} অন্তর্ভুক্ত করে ধ্বংস ব্যবহার করি।

এরপরে, isActive একটি সত্যতাপূর্ণ মান আছে কিনা তা আমরা যাচাই করতে এগিয়ে যাই। যদি তা হয়, আমরা CSS ক্লাসের নাম active করব।

যখন রিঅ্যাক্ট রাউটারে বর্তমান পাথ NavLink কম্পোনেন্টের to সাথে মেলে, তখন isActive ফাংশন একটি বুলিয়ান মানের মূল্যায়ন করবে।

ফলস্বরূপ, রিঅ্যাক্ট রাউটার সংশ্লিষ্ট <NavLink /> এলিমেন্টে active শ্রেণীকে নির্বিঘ্নে অন্তর্ভুক্ত করবে, এটি বর্তমানে সক্রিয় রুট হিসাবে নির্দেশ করে।

সংক্ষিপ্ত সংস্করণ

আপনি যদি একটি সংক্ষিপ্ত পদ্ধতি পছন্দ করেন, আপনি উপরে উল্লিখিত কোড রিফ্যাক্টর করতে টারনারি অপারেটর ব্যবহার করতে পারেন। এই অপারেটর ফরম্যাট ব্যবহার করে একটি if/else স্টেটমেন্ট প্রতিস্থাপন করার একটি উপায় প্রদান করে: condition ? truthy expression : falsy expression ।

একটি উদাহরণ হিসাবে নিম্নলিখিত বিবেচনা করুন:

 function getClassName({isActive}) { if (isActive) { return "active"; } else { return ""; } }

আপনি নিম্নলিখিত পদ্ধতির সাথে উপরের কোডটি প্রতিস্থাপন করতে পারেন:

 function getClassName({isActive}) { return isActive ? "active" : ""; }

আপনাকে কেবল নিশ্চিত করতে হবে যে রিটার্ন স্টেটমেন্টটি টারনারি অপারেটরের বাইরে রাখা হয়েছে। যখন isActive কন্ডিশন সত্য হয়, তখন রাশিটির পরে ? "active" মৃত্যুদন্ড কার্যকর করা হবে। অন্যথায়, : পরে অভিব্যক্তিটি "" কার্যকর করা হবে।

এখন, আমরা getClassName নামে একটি পৃথক ফাংশন সংজ্ঞার প্রয়োজনীয়তা দূর করতে পারি। পরিবর্তে, আমরা এইরকম একটি তীর ফাংশন ব্যবহার করতে পারি: ({isActive}) => isActive ? "active" : "" ।

আপনি যদি এই পরিবর্তনটি পড়তে খুব কঠিন মনে করেন তবে আপনি আগের মতো একটি পৃথক ফাংশন ব্যবহার চালিয়ে যেতে পারেন।

চূড়ান্ত কোড এই মত দেখাবে:

 import {NavLink} from "react-router-dom"; function App() { return <ul> <li> <NavLink to="/" className={({isActive}) => isActive ? "active" : ""}>Home</NavLink> </li> <li> <NavLink to="/about" className={({isActive}) => isActive ? "active" : ""}>About</NavLink> </li> </ul> }

লিঙ্ক এবং নেভিলিংকের মধ্যে নির্বাচন করা: কী তাদের আলাদা করে?

আপনি হয়তো ইতিমধ্যেই লক্ষ্য করেছেন যে আমি আমাদের সাধারণ বন্ধু, Link পরিবর্তে NavLink ব্যবহার করছি। কিন্তু চিন্তা করবেন না, আমাকে ব্যাখ্যা করতে দিন কেন। আপনি দেখতে পাচ্ছেন, <Link /> উপাদানটি আপনাকে className প্রপের জন্য একটি ফাংশন সংজ্ঞা ব্যবহার করার অনুমতি দেয় না। হ্যাঁ, এটা আশ্চর্যজনক হতে পারে, কিন্তু আপনি যখন <Link /> এর সাথে কাজ করছেন তখন ঠিক এমনই হয়।

একটি সাধারণ ভুল যা আমি দেখেছি তা হল জুনিয়র রিঅ্যাক্ট ডেভেলপাররা <Link /> কম্পোনেন্টের className প্রপে ফাংশন সংজ্ঞা ব্যবহার করার চেষ্টা করে, যা কেবল কাজ করে না।

আপনি আগ্রহী হলে, আমি এই বিষয় সম্পর্কে একটি নিবন্ধ লিখতে পারেন. শুধু মন্তব্যে আমাকে জানান!

নেভিগেট ব্যবহার করুন

নির্দিষ্ট পরিস্থিতিতে, আপনাকে আপনার প্রতিক্রিয়া অ্যাপ্লিকেশনের মধ্যে প্রোগ্রাম্যাটিকভাবে পৃষ্ঠাগুলিকে স্থানান্তর করতে হতে পারে। উদাহরণস্বরূপ, একটি নির্দিষ্ট পৃষ্ঠায় দর্শককে পুনঃনির্দেশ করতে, আপনি একটি অনুরোধ জমা দিতে পারেন এবং প্রতিক্রিয়ার জন্য অপেক্ষা করতে পারেন।

এখানে কিছু উদাহরণ আছে:

• ব্যবহারকারী যদি সাইন ইন না করে থাকেন, তাহলে তাদের লগইন পৃষ্ঠায় পাঠান।
• getLogin অনুরোধ সফলভাবে সম্পন্ন হওয়ার পর, ব্যবহারকারীকে /dashboard পুনঃনির্দেশ করুন।

এর জন্য useNavigate() হুক ব্যবহার করা প্রয়োজন, যা একটি ফাংশন প্রদান করে যা আপনি ব্যবহারকারীকে প্রোগ্রাম্যাটিকভাবে একটি নতুন রুটে পুনঃনির্দেশ করতে ব্যবহার করতে পারেন।

এক নজর দেখে নাও:

 import React, {useEffect} from "react"; import {useNavigate} from "react-router-dom"; function HelpPage() { const navigate = useNavigate(); useEffect(() => { const isLoggedIn = window.localStorage.getItem("isLoggedIn"); if (!isLoggedIn) { navigate("/login"); } }, []); return <h2>Help page</h2>; }

ব্রাউজার রাউটার ব্যবহার করা অপরিহার্য!

এই উদাহরণে, স্থানীয় স্টোরেজ কী isLoggedIn এর জন্য একটি মান বরাদ্দ করা আছে কিনা তা আমরা পরীক্ষা করছি। যদি তা না হয়, আমরা navigate("/login") ফাংশন ব্যবহার করে ব্যবহারকারীকে /login পৃষ্ঠায় পুনঃনির্দেশ করব।

এটি কাজ করার জন্য, শুধুমাত্র একটি কম্পোনেন্টের মধ্যে useNavigate() হুক ব্যবহার করতে মনে রাখবেন যা <BrowserRouter /> কম্পোনেন্টের ভিতরে থাকে। অন্যথায়, এটি সঠিকভাবে কাজ করবে না।

উদাহরণস্বরূপ, নিম্নলিখিত উদাহরণ কাজ করবে না:

 import React from "react"; import {BrowserRouter, useNavigate} from "react-router-dom"; function App() { // ❌ This breaks because the component was not wrapped by BrowserRouter, but its children are. const history = useNavigate(); return <BrowserRouter> {/* ... */} </BrowserRouter>; }

আপনি যদি App() কম্পোনেন্টের ভিতরে useNavigate() হুক ব্যবহার করার চেষ্টা করছেন, তাহলে আপনি একটু হেঁচকিতে পড়তে পারেন। কারণ এটি কাজ করবে না যতক্ষণ না আপনি App() উপাদানটিকে <BrowserRouter /> দিয়ে মোড়ানো।

কিন্তু চিন্তা করবেন না!

ভাল খবর হল অ্যাপের ভিতরের সমস্ত চাইল্ড কম্পোনেন্ট স্বয়ংক্রিয়ভাবে <BrowserRouter /> দ্বারা মোড়ানো হবে, তাই আপনি কোনো সমস্যা ছাড়াই সেই শিশু উপাদানগুলিতে useNavigate() ব্যবহার করতে পারবেন।

যাইহোক, যদি আপনাকে সত্যিই <App /> উপাদানটিতে useNavigate() ব্যবহার করতে হয় তবে একটি সহজ সমাধান রয়েছে। আপনাকে শুধু একটি প্যারেন্ট কম্পোনেন্ট তৈরি করতে হবে যা <App /> কে মোড়ানো এবং সেই প্যারেন্ট কম্পোনেন্টের ভিতরে <BrowserRouter /> সরানো নিশ্চিত করুন। একবার আপনি এটি করলে, আপনি যেতে পারবেন এবং আপনার হৃদয়ের বিষয়বস্তুতে <App /> কম্পোনেন্টে useNavigate() ব্যবহার করতে পারবেন 💗

অ্যাক্সেসযোগ্যতা এবং সঠিক লিঙ্ক ব্যবহার নিশ্চিত করা

যখন আপনার ওয়েবসাইট অ্যাক্সেসযোগ্য করার কথা আসে, তখন আপনার লিঙ্কগুলি কীভাবে গঠন করা হয় সেদিকে মনোযোগ দেওয়া গুরুত্বপূর্ণ। এটি নিশ্চিত করতে, অন্যান্য পদ্ধতির পরিবর্তে <Link /> উপাদানগুলি ব্যবহার করার পরামর্শ দেওয়া হচ্ছে।

কেন?

ঠিক আছে, এই উপাদানগুলি স্বয়ংক্রিয়ভাবে <a> ট্যাগ হিসাবে রেন্ডার হবে, যা তাদের অ্যাক্সেসযোগ্যতার বৈশিষ্ট্যগুলির জন্য পরিচিত।

কখন যে ঘটবে?

সাধারণত, যখন আপনাকে কিছু যুক্তির উপর ভিত্তি করে ব্যবহারকারীদের প্রোগ্রাম্যাটিকভাবে পুনঃনির্দেশ করতে হবে, যেমন একটি fetch() অপারেশনের ফলাফল।

অবস্থান ব্যবহার করুন

আপনি যদি প্রতিবার রিঅ্যাক্ট রাউটার আপনাকে একটি নতুন ঠিকানায় নিয়ে যাওয়ার সময় কোডের একটি অংশ কার্যকর করতে চান?

আপনি useLocation হুকের সাহায্যে সহজেই তা সম্পন্ন করতে পারেন। তবে আমরা বিস্তারিত জানার আগে, আসুন কিছু পরিস্থিতিতে অন্বেষণ করি যেখানে এটি কার্যকর হতে পারে। সবচেয়ে সাধারণ ব্যবহারের ক্ষেত্রে একটি হল আপনার অ্যানালিটিক্স পরিষেবাতে একটি পেজভিউ ইভেন্ট পাঠানো, যেমন Google Analytics।

যাইহোক, এটি উল্লেখ করার মতো যে Google Analytics 4 এখন স্বয়ংক্রিয়ভাবে এটির যত্ন নেয়, তাই আপনাকে এটিকে নিজেকে প্রয়োগ করতে হবে না।

তবুও, useLocation হুক ব্যবহার সম্পর্কে শেখা এখনও মূল্যবান, কারণ আপনি এটির জন্য অন্যান্য উদ্দেশ্য খুঁজে পেতে পারেন। উদাহরণস্বরূপ, আপনি এটিকে অন্যান্য লাইব্রেরি এবং বিশ্লেষণ পরিষেবাগুলির সাথে একীভূত করতে বা পরিদর্শন করা রুটের উপর ভিত্তি করে নির্দিষ্ট ক্রিয়া সম্পাদন করতে ব্যবহার করতে পারেন।

সম্ভাবনা সীমাহীন!

অবস্থান হুক ব্যবহার করুন

useLocation হুকটি খুবই সহজ কারণ এটি আপনাকে বর্তমানে ব্যবহৃত রুট সম্পর্কে তথ্য দেয়।

কিভাবে UseLocation হুক ব্যবহার করবেন সে সম্পর্কে এখানে একটি বন্ধুত্বপূর্ণ গাইড রয়েছে:

 import {BrowserRouter, Routes, Route, useLocation} from "react-router-dom"; import {createRoot} from "react-dom/client"; function App() { const location = useLocation(); console.log(location.pathname); return <Routes> {/* routes here... */} </Routes> } createRoot(document.querySelector("#react-root")).render(<BrowserRouter><App /></BrowserRouter>);

এখন, আপনি অবস্থান পরিবর্তনশীল মাধ্যমে রুট তথ্য অ্যাক্সেস করতে পারেন. এটি একটি বস্তু যা বর্তমান pathname ধারণ করে।

ব্যবহারকারী বর্তমানে কোন রুট ব্রাউজ করছেন তা খুঁজে বের করতে, শুধু location.pathname ব্যবহার করুন। এটি আপনাকে / , /about , বা আপনার সেট আপ করা অন্য কোনো রুটের মতো কিছু দেবে৷

মনে রাখবেন, useNavigate হুকের মতোই, আপনার কোডটি <BrowserRouter /> দ্বারা মোড়ানো একটি উপাদানের ভিতরে চলমান থাকা গুরুত্বপূর্ণ। অন্যথায়, useLocation হুক তার যাদু করবে না।

অবস্থান পরিবর্তন সাড়া

অবস্থান পরিবর্তন হলে, আপনি React রাউটারে বর্তমান URL পাথ অ্যাক্সেস করতে useLocation হুক ব্যবহার করতে পারেন। একটি useEffect হুক দিয়ে আপনার কোড মোড়ানো এবং location নির্ভরতা সেট করে, যখনই একটি নতুন URL-এ নেভিগেশন থাকে তখন আপনি কোডের একটি নির্দিষ্ট অংশ চালাতে পারেন৷

এটি কিভাবে করতে হয় তার একটি উদাহরণ এখানে:

 import React, {useEffect} from "react"; import {BrowserRouter, Routes, Route, useLocation} from "react-router-dom"; import {createRoot} from "react-dom/client"; function App() { const location = useLocation(); // run a piece of code on location change useEffect(() => { console.log(location.pathname); // send it to analytic, or do some conditional logic here }, [location]); return <Routes> {/* routes here... */} </Routes> } createRoot(document.querySelector("#react-root")).render(<BrowserRouter><App /></BrowserRouter>);

যখনই ব্যবহারকারী নেভিগেশনের সময় একটি নতুন রুটে চলে যায়, useEffect হুকের ভিতরের কোডটি চলবে এবং তার কাজটি করবে। এটি মূলত নিশ্চিত করার একটি উপায় যে নির্দিষ্ট কোড কার্যকর হয় যখনই অবস্থান অবজেক্টে পরিবর্তন হয়।

চমৎকার কাজ, এখন আপনি একজন প্রতিক্রিয়া রাউটার বিশেষজ্ঞ 🥳

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