React Router-এ নেভিগেশন স্টেট

যদি আমরা তালিকা থেকে পণ্যগুলিতে ক্লিক করি, আমরা দেখতে পাই যে প্রথমবার পণ্যের পৃষ্ঠাটি বিলম্বে লোড হয়, এবং পরের বার দ্রুত, একই জিনিস পণ্য যোগ করা এবং আপডেট করার সময়ও, যেহেতু ক্লায়েন্ট পাশে আমাদের ক্যাশে আছে।

এই পাঠে আমরা ব্যবহারকারীকে দেখাব আমাদের পৃষ্ঠাটি কোন অবস্থায় আছে। এতে আমাদের সাহায্য করতে পারে হুক useNavigation। এটি তার কাজের ফলাফল হিসেবে কয়েকটি বৈশিষ্ট্য সহ একটি অবজেক্ট রিটার্ন করে। আমাদের আগ্রহী করবে এর মধ্যে একটি - state বৈশিষ্ট্য।

state বৈশিষ্ট্যের 3টি মান থাকতে পারে: 'idle' (কিছুই ঘটছে না), 'submitting' (যখন ফর্ম জমা দেওয়া হয় POST, PUT, PATCH বা DELETE এর মাধ্যমে এবং রুটের action ডাকা হয়), 'loading' (যখন পরবর্তী রুটের লোডার ডাকা হয়, যাতে পরবর্তী পৃষ্ঠা রেন্ডার করা যায়)। আমাদের আগ্রহী করবে শেষ মানটি।

চলুন root.jsx ফাইলে যাই এবং এই হুকটি ইম্পোর্ট করি:

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

এরপর, হুক দ্বারা রিটার্নকৃত ফলাফলের জন্য, Root ফাংশনে একটি navigation ভেরিয়েবল ডিক্লেয়ার করব - return-এর আগে:

const { products } = useLoaderData();
const navigation = useNavigation();

এবং এখন এর state বৈশিষ্ট্যটি ব্যবহার করব, যদি এর মান হয় 'loading', তাহলে আমরা সেই ডিভটিতে loading ক্লাস সেট করব, যেখানে আমাদের পণ্যের ডেটা রেন্ডার হচ্ছে:

<div id="product" className={navigation.state === 'loading' ? 'loading' : ''}>
	<Outlet />
</div>

আমাদের শুধু loading ক্লাসের জন্য স্টাইল index.css-এ যোগ করা বাকি। চলুন লোডিং স্টেটের ক্ষেত্রে শুধু opacity কমিয়ে দিই:

div.loading {
	opacity: 0.3;
}

এখন, যদি সাইট রিলোড করে, তালিকার পণ্যগুলিতে ক্লিক করা হয় বা, উদাহরণস্বরূপ, একটি নতুন পণ্য যোগ করা হয়, আমরা দেখব যে বর্তমান পৃষ্ঠাটি কিছুক্ষণের জন্য ম্লান হয়ে যাবে, তারপরেই পরবর্তী পৃষ্ঠাটি প্রদর্শিত হবে।

আপনি পূর্ববর্তী পাঠগুলোর অ্যাসাইনমেন্টে তৈরি করা অ্যাপ্লিকেশনটি নিন। পাঠের উপকরণ ব্যবহার করে, useNavigation হুকের সাহায্যে এটি তৈরি করুন যাতে ব্যবহারকারী দেখতে পারে যে পরবর্তী ছাত্রের ডেটা সহ পৃষ্ঠাটি লোড হচ্ছে।