সমাধান করা হয়েছে: পাস ডেটা নেভিগেট প্রতিক্রিয়া রাউটার ডোম

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

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

const MyComponent = () => {
  const history = useHistory();

  const handleClick = (data) => {
    history.push({ pathname: '/myroute', state: data }); // pass data to route as state object
  };

  return (
    <button onClick={() => handleClick(data)}>Go to MyRoute</button>
  );
};

// লাইন 1: এই লাইনটি react-router-dom লাইব্রেরি থেকে useHistory হুক আমদানি করে।
// লাইন 3: এই লাইনটি MyComponent নামক একটি ধ্রুবক ঘোষণা করে যা একটি ফাংশন যা JSX প্রদান করে।
// লাইন 4: এই লাইনটি ইতিহাস নামক একটি ধ্রুবক ঘোষণা করে যা প্রতিক্রিয়া-রাউটার-ডম থেকে আমদানি করা useHistory হুকের জন্য নির্ধারিত হয়।
// লাইন 6: এই লাইনটি হ্যান্ডেলক্লিক নামে একটি ফাংশন ঘোষণা করে যা একটি প্যারামিটার, ডেটা নেয়।
// লাইন 7: এই লাইনটি ইতিহাস অবজেক্ট ব্যবহার করে স্ট্যাকের উপর একটি নতুন রুট পুশ করতে পাথনাম '/myroute' এবং স্টেট ডেটা অবজেক্ট হিসাবে পাস করে।
// লাইন 9 - 11: এই লাইনগুলি JSX প্রদান করে যার মধ্যে একটি onClick ইভেন্ট হ্যান্ডলারের সাথে একটি বোতাম উপাদান রয়েছে যা হ্যান্ডেলক্লিককে কল করে এবং একটি যুক্তি হিসাবে ডেটা পাস করে।

প্রতিক্রিয়া রাউটার ডোম

রিঅ্যাক্ট রাউটার DOM হল রিঅ্যাক্টের জন্য একটি রাউটিং লাইব্রেরি যা ডেভেলপারদের তাদের রিঅ্যাক্ট অ্যাপ্লিকেশনের মধ্যে রুট তৈরি ও পরিচালনা করতে দেয়। এটি লিংক, রুট, সুইচ এবং ব্রাউজার রাউটারের মতো উপাদান সহ প্রতিক্রিয়া সহ জটিল, বহু-পৃষ্ঠার ওয়েব অ্যাপ্লিকেশন তৈরি করার জন্য প্রয়োজনীয় মূল উপাদানগুলি সরবরাহ করে। এটি গতিশীল রুট ম্যাচিং এবং অবস্থান ট্র্যাকিংয়ের মতো বৈশিষ্ট্যগুলিও সরবরাহ করে। রিঅ্যাক্ট রাউটার DOM-এর সাহায্যে, ডেভেলপাররা সহজেই ইউআরএল বা ব্রাউজার ইতিহাস ম্যানুয়ালি পরিচালনা না করে একাধিক ভিউ এবং রুট সহ একক পৃষ্ঠার অ্যাপ্লিকেশন তৈরি করতে পারে।

প্রতিক্রিয়া-রাউটার-ডোমে নেভিগেটের মাধ্যমে আপনি কীভাবে ডেটা পাস করবেন

রিঅ্যাক্ট রাউটারে, হিস্ট্রি এপিআই-এর স্টেট অবজেক্ট ব্যবহার করে নেভিগেশনের মাধ্যমে ডেটা পাস করা যেতে পারে। স্টেট অবজেক্টটি একটি দ্বারা রেন্ডার করা যেকোনো উপাদানের প্রপসের মাধ্যমে অ্যাক্সেসযোগ্য উপাদান. ডেটা পাস করার জন্য, নেভিগেট ফাংশন কল করার সময় আপনি এটি স্টেট অবজেক্টে যোগ করতে পারেন। উদাহরণ স্বরূপ:

const { history } = this.props;
history.push({
পথের নাম: '/কিছু/পথ',
রাজ্য: { someData: 'data' }
});