রিঅ্যাক্ট রাউটার হিস্টোরি,পুশ-এ ডেটা পাস করার সাথে সম্পর্কিত প্রধান সমস্যা হল যে পৃষ্ঠা রিফ্রেশ জুড়ে ডেটা টিকে থাকে না। যখন একজন ব্যবহারকারী পৃষ্ঠাটি রিফ্রেশ করে, তখন history.push-এ সংরক্ষিত ডেটা হারিয়ে যাবে এবং পরবর্তী পৃষ্ঠা লোডের জন্য ব্যবহার করার জন্য উপলব্ধ হবে না। এটি অপ্রত্যাশিত আচরণের দিকে নিয়ে যেতে পারে এবং পূর্ববর্তী পৃষ্ঠা লোড থেকে ডেটা অ্যাক্সেস বা সংরক্ষণ করার চেষ্টা করার সময় সমস্যা সৃষ্টি করতে পারে।
import { useHistory } from "react-router-dom"; const MyComponent = () => { const history = useHistory(); const handleClick = (data) => { history.push({ pathname: "/mypage", state: data }); }; return <button onClick={() => handleClick({ someData: "data" })}>Go</button>; };
1. এই লাইনটি রিঅ্যাক্ট-রাউটার-ডোম লাইব্রেরি থেকে useHistory হুক আমদানি করে, যা ইতিহাস অবজেক্টে অ্যাক্সেস প্রদান করে যা অ্যাপের বর্তমান অবস্থানের উপর নজর রাখে।
2. এই লাইনটি MyComponent নামক একটি কার্যকরী উপাদান ঘোষণা করে এবং এটিকে একটি ধ্রুবক ভেরিয়েবলে বরাদ্দ করে।
3. এই লাইনটি হিস্ট্রি অবজেক্টে অ্যাক্সেস পেতে এবং ইতিহাস নামক একটি ধ্রুবক ভেরিয়েবলের সাথে বরাদ্দ করতে লাইন 1 এ আমদানি করা useHistory হুক ব্যবহার করে।
4. এই লাইনটি handleClick নামক একটি ফাংশন ঘোষণা করে যা ডেটা নামক একটি আর্গুমেন্ট নেয় এবং history.push() ব্যবহার করে ইতিহাস স্ট্যাকের উপর পাথনাম এবং রাষ্ট্রীয় বৈশিষ্ট্য সম্বলিত একটি বস্তুকে পুশ করে।
5. এই লাইনটি একটি onClick ইভেন্ট হ্যান্ডলারের সাথে একটি বোতাম উপাদান প্রদান করে যা একটি ব্যবহারকারী দ্বারা ক্লিক করার সময় তার যুক্তি হিসাবে someData ধারণকারী বস্তুর সাথে handleClick() কল করে।
ইতিহাসের ধাক্কা
রিঅ্যাক্ট রাউটারে হিস্ট্রি পুশ হল একটি পদ্ধতি যা পৃষ্ঠা রিফ্রেশ না করেই ব্রাউজারে ইউআরএলকে প্রোগ্রাম্যাটিকভাবে পরিবর্তন করতে ব্যবহৃত হয়। এটি বিকাশকারীদের একক-পৃষ্ঠার অ্যাপ্লিকেশন তৈরি করতে দেয় যা এখনও নেভিগেশন এবং গভীর লিঙ্কিং পরিচালনা করতে সক্ষম। ইতিহাস পুশ ব্রাউজারের ইতিহাস API ব্যবহার করে কাজ করে, যা বিকাশকারীদের পৃষ্ঠাটি পুনরায় লোড না করেই বর্তমান ইউআরএলটি পরিচালনা করতে দেয়। এটি ব্যবহারকারীদের জন্য প্রতিবার পুনরায় লোড না করে একটি অ্যাপ্লিকেশনের বিভিন্ন পৃষ্ঠার মধ্যে নেভিগেট করা সম্ভব করে তোলে। উপরন্তু, এটি গভীর সংযোগের জন্য ব্যবহার করা যেতে পারে, ব্যবহারকারীদের সরাসরি একটি অ্যাপ্লিকেশনের নির্দিষ্ট অংশগুলিতে লিঙ্ক করতে দেয়।
আমি কীভাবে প্রতিক্রিয়া রাউটারে ইতিহাস ব্যবহার করব?
প্রতিক্রিয়া রাউটার আপনার প্রতিক্রিয়া অ্যাপ্লিকেশনে ইতিহাস ব্যবহার করার একটি উপায় প্রদান করে। ইতিহাস আপনাকে বর্তমান পৃষ্ঠা, সেইসাথে পরিদর্শন করা পূর্ববর্তী পৃষ্ঠাগুলির ট্র্যাক রাখতে দেয়৷ এটি নেভিগেশন তৈরি এবং ব্যবহারকারীর ক্রিয়াকলাপ ট্র্যাক রাখার জন্য দরকারী।
প্রতিক্রিয়া রাউটারে ইতিহাস ব্যবহার করতে, আপনাকে ইতিহাস প্যাকেজ থেকে createHistory() পদ্ধতি ব্যবহার করে একটি ইতিহাস অবজেক্ট তৈরি করতে হবে। এটি আপনাকে পুশ(), প্রতিস্থাপন(), এবং গো() এর মতো পদ্ধতিতে অ্যাক্সেস দেবে। এই পদ্ধতিগুলি আপনাকে ব্রাউজারের URL ম্যানিপুলেট করতে এবং আপনার অ্যাপ্লিকেশনের বিভিন্ন রুটের মধ্যে নেভিগেট করতে দেয়৷ আপনি URL-এ পরিবর্তনগুলি শুনতে এবং সেই অনুযায়ী আপনার অ্যাপ্লিকেশন আপডেট করতে listen() পদ্ধতি ব্যবহার করতে পারেন।
একবার আপনি একটি ইতিহাস অবজেক্ট তৈরি করলে, এটি তৈরি করার সময় আপনি এটি আপনার রাউটার উপাদানে পাস করতে পারেন। এটি প্রতিক্রিয়া রাউটারকে ব্যবহারকারীদের দ্বারা করা সমস্ত পরিবর্তনের ট্র্যাক রাখতে এবং সেই অনুযায়ী আপডেট করার অনুমতি দেবে।
রিঅ্যাক্ট রাউটারের সাথে ইতিহাস ব্যবহার করা ডেভেলপারদের জন্য শক্তিশালী নেভিগেশন উপাদান তৈরি করা সহজ করে যা ব্যবহারকারীদের বোঝা এবং ইন্টারঅ্যাক্ট করা সহজ।