সমাধান করা হয়েছে: রিঅ্যাক্ট রাউটার v6 দিয়ে রিডাইরেক্ট

রিঅ্যাক্ট রাউটার v6 এর সাথে রিডাইরেক্ট সম্পর্কিত প্রধান সমস্যা হল যখন রিডাইরেক্ট হয় তখন কম্পোনেন্ট রি-রেন্ডার হয় না। এর মানে হল যে পুনঃনির্দেশিত হওয়ার সময় উপাদানের সাথে যুক্ত কোনো অবস্থা বা প্রপস আপডেট করা হবে না এবং সেই মানগুলিতে করা কোনো পরিবর্তন নতুন পৃষ্ঠায় প্রতিফলিত হবে না। উপরন্তু, যেহেতু রিঅ্যাক্ট রাউটার v6 ক্যোয়ারী স্ট্রিং সমর্থন করে না, তাই URL-এ পাস করা যেকোন ক্যোয়ারী প্যারামিটারও রিডাইরেক্ট করার সময় হারিয়ে যাবে।

import { Redirect } from "react-router-dom";

<Redirect to="/home" />

1. এই লাইনটি react-router-dom লাইব্রেরি থেকে পুনঃনির্দেশ উপাদান আমদানি করে।

2. এই লাইনটি একটি পুনঃনির্দেশ উপাদান রেন্ডার করে, যা ব্যবহারকারীকে "/হোম" রুটে পুনঃনির্দেশিত করবে।

আমি কিভাবে প্রতিক্রিয়া রাউটার v6 এ পুনঃনির্দেশ করতে পারি

v6

প্রতিক্রিয়া রাউটার v6 নামে একটি নতুন উপাদান সরবরাহ করে যা ব্যবহারকারীদের এক পৃষ্ঠা থেকে অন্য পৃষ্ঠায় পুনঃনির্দেশ করতে ব্যবহার করা যেতে পারে। এটি ব্যবহার করার জন্য, আপনাকে কেবল react-router-dom প্যাকেজ থেকে পুনঃনির্দেশ উপাদান আমদানি করতে হবে এবং তারপর এটি আপনার রুট কনফিগারেশনে ব্যবহার করতে হবে। যখন একজন ব্যবহারকারী 'থেকে' প্রপ-এ নির্দিষ্ট পথ পরিদর্শন করে, তখন তাদের 'টু' প্রপে নির্দিষ্ট করা পথে পুনঃনির্দেশিত করা হবে। উদাহরণ স্বরূপ:

'react-router-dom' থেকে { পুনঃনির্দেশ } আমদানি করুন;
} />

লগইন করার পর আমি কিভাবে রিঅ্যাক্ট রাউটার v6 এ রিডাইরেক্ট করব

একটি সফল লগইন করার পরে পুনঃনির্দেশ করা ওয়েব অ্যাপ্লিকেশনের একটি সাধারণ বৈশিষ্ট্য। প্রতিক্রিয়া রাউটার v6 এ, আপনি ব্যবহার করতে পারেন একটি সফল লগইন করার পরে ব্যবহারকারীকে পুনঃনির্দেশিত করার উপাদান।

এটি করার জন্য, আপনাকে একটি রুট তৈরি করতে হবে যা ব্যবহারকারী লগ ইন করেছে কিনা তা পরীক্ষা করে এবং তারপর সেই অনুযায়ী তাদের পুনঃনির্দেশ করে। উদাহরণ স্বরূপ:

{
যদি (isLoggedIn) {
প্রত্যাবর্তন ;
} অন্য {
প্রত্যাবর্তন ;
}
}} />

এই উদাহরণে, আমরা ব্যবহারকারী লগ ইন করা আছে কিনা তা পরীক্ষা করছি এবং তারপর LoginPage কম্পোনেন্ট রেন্ডার করছি বা /ড্যাশবোর্ডে পুনঃনির্দেশ করছি। এছাড়াও আপনি পুনঃনির্দেশিত উপাদানে প্রপস পাস করতে পারেন: এটি আপনাকে ব্যবহারকারীকে পুনঃনির্দেশিত করার আগে কোথায় ছিল তার ট্র্যাক রাখতে দেয়৷

আমি কিভাবে স্বয়ংক্রিয়ভাবে প্রতিক্রিয়া রিডাইরেক্ট করব

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

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

{isLoggedIn? : }

এই উদাহরণে, আমরা যখন রিডাইরেকশনটি সম্পাদন করব তার জন্য আমাদের শর্ত হিসাবে isLoggedIn বুলিয়ান ভেরিয়েবল (যা অন্য কোথাও সেট করা দরকার) ব্যবহার করছি। যদি এটি সত্য হয়, তাহলে আমরা আমাদের হোম উপাদান রেন্ডার করি; অন্যথায়, আমরা পুনঃনির্দেশ সঞ্চালন.

আপনি কিভাবে 5 সেকেন্ড পর রিডাইরেক্ট করবেন

রিঅ্যাক্ট রাউটারে 5 সেকেন্ড পরে রিডাইরেক্ট করতে, আপনি একটি আর্গুমেন্ট হিসাবে পছন্দসই রুট সহ history.push() পদ্ধতিতে কল করতে setTimeout() ফাংশন ব্যবহার করতে পারেন।

উদাহরণ:
"react-router-dom" থেকে { useHistory } আমদানি করুন;
const history = useHistory();
setTimeout(() => {
history.push("/পুনঃনির্দেশিত পৃষ্ঠা");
}, 5000);