React Router-এ অন্য একটি রুটে রিডাইরেক্ট
এখন পণ্য সম্পাদনা করার সময় ফর্মে প্রবেশ করা ডেটা সংরক্ষণ করা হয়, তবে একটি সমস্যা রয়েছে - ডেটা সংরক্ষণ করার পরে আমরা ফর্ম সহ পৃষ্ঠায় থাকি, এবং আমাদের পণ্য পৃষ্ঠায় ফিরে যেতে হবে। এটি করতে আমাদের রিডাইরেক্ট সাহায্য করবে, যার সাথে আমরা এই পাঠে পরিচিত হব।
আসুন edit.jsx ফাইলটি খুলি
এবং লাইব্রেরি থেকে redirect ইম্পোর্ট করি:
import { redirect } from 'react-router-dom';
এবং তারপর এমন করি যে
action ফাংশনটি এখন
1 ফেরত দেবে না, বরং আমাদেরকে
প্রয়োজনীয় রুটে রিডাইরেক্ট করবে। এই ক্ষেত্রে
আমাদের পণ্য পৃষ্ঠায় ফিরে যেতে হবে:
return redirect(`/products/${params.productId}`);
এখন, সংরক্ষণ বাটনে ক্লিক করলে, আমরা আপডেট করা ডেটা সহ পণ্য পৃষ্ঠায় ফিরে যাই।
আমরা নতুন পণ্য যোগ করার জন্যও একই কাজ করতে পারি, কারণ সম্ভবত এটি আরও সুবিধাজনক হবে সরাসরি ফর্মে গিয়ে এটি পূরণ করা। আসুন এটি করি।
প্রথমে আমাদের এখন
root.jsx ফাইলটি খুলতে হবে এবং
redirect ইম্পোর্ট করতে হবে,
যেহেতু পণ্য যোগ করা
রুট পৃষ্ঠায় ঘটে:
import { redirect } from 'react-router-dom';
আবার action ফাংশনটি নিন এবং
এখন product ফেরত দেবেন না,
বরং সম্পাদনা পৃষ্ঠায় রিডাইরেক্ট করবেন:
return redirect(`/products/${product.id}/edit`);
এটি পরীক্ষা করি। এখন পণ্য যোগ করার বাটনে ক্লিক করুন এবং এর সম্পাদনার ফর্মটি দেখতে পাবেন
আপনি পূর্ববর্তী পাঠের অ্যাসাইনমেন্টে তৈরি করা অ্যাপ্লিকেশনটি নিন। পাঠের উপকরণ ব্যবহার করে, ফর্ম সহ পৃষ্ঠায় ডেটা সংরক্ষণ বাটন ক্লিক করার পরে ছাত্র পৃষ্ঠায় রিডাইরেক্ট বাস্তবায়ন করুন।
এবং এখন প্রধান পৃষ্ঠা থেকে ছাত্র ডেটা সম্পাদনা ফর্ম পৃষ্ঠায় রিডাইরেক্ট বাস্তবায়ন করুন তালিকায় ছাত্র যোগ করার বাটনে ক্লিক করার পরে।
