সমাধান করা হয়েছে: url react রাউটার dom v6 থেকে প্রশ্ন পান

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

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

const MyComponent = () => {
  const location = useLocation();

  const queryParams = new URLSearchParams(location.search);

  return (
    <div>
      <h1>My Component</h1>
      <p>Query Param: {queryParams.get("myParam")}</p>
    </div>
  );  
};

1. “'react-router-dom' থেকে { useLocation } আমদানি করুন;” - এই লাইনটি রিঅ্যাক্ট-রাউটার-ডোম লাইব্রেরি থেকে useLocation হুক আমদানি করে।
2. “const MyComponent = () => {” – এই লাইনটি MyComponent নামক একটি ফাংশন ঘোষণা করে যা একটি প্রতিক্রিয়া উপাদান প্রদান করবে।
3. "const অবস্থান = useLocation();" – এই লাইনটি অ্যাপ্লিকেশনটির বর্তমান অবস্থান (যেমন, URL) সম্পর্কে তথ্য পেতে আমদানি করা ইউজ লোকেশন হুক ব্যবহার করে।
4. "const queryParams = new URLSearchParams(location.search);" – এই লাইনটি এমন একটি বস্তু তৈরি করে যাতে বর্তমান URL-এর সমস্ত ক্যোয়ারী প্যারামিটার থাকে (যেমন, ?myParam=foo)।
5. বাকি কোডটি শুধুমাত্র একটি h1 এবং p ট্যাগ সহ একটি প্রতিক্রিয়া উপাদান প্রদান করছে যা URL ক্যোয়ারী স্ট্রিং-এ myParam এর মান প্রদর্শন করে (যদি এটি বিদ্যমান থাকে)।

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

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

প্রতিক্রিয়া v6 রাউটারে আমি কীভাবে কোয়েরি স্ট্রিং পেতে পারি

v6

প্রতিক্রিয়া রাউটার v6-এ, আপনি useLocation হুক ব্যবহার করে ক্যোয়ারী স্ট্রিং প্যারামিটার অ্যাক্সেস করতে পারেন। এই হুক একটি অবস্থান অবজেক্ট প্রদান করে যা বর্তমান URL সম্পর্কে পাথনাম, অনুসন্ধান, হ্যাশ এবং রাজ্য বৈশিষ্ট্য সহ তথ্য ধারণ করে। অনুসন্ধান বৈশিষ্ট্য একটি স্ট্রিং হিসাবে ক্যোয়ারী স্ট্রিং পরামিতি রয়েছে. আপনি তারপর ক্যোয়ারী স্ট্রিং পরামিতি সব ধারণকারী একটি বস্তু পেতে এই স্ট্রিং পার্স করতে পারেন.
উদাহরণ স্বরূপ:
const {search} = useLocation();
const params = নতুন URLSearchParams(অনুসন্ধান);
const param1 = params.get('param1');