বিক্রিয়া-রাউটার ভি 4-এ কীভাবে প্যারামিতি পাবেন

Question 1

আমি আমার প্রকল্পে প্রতিক্রিয়া-রাউটার-ডম 4.0.0-বিটা 6 ব্যবহার করছি। আমার নীচের মতো একটি কোড রয়েছে:

<Route exact path="/home" component={HomePage}/>

এবং আমি HomePageউপাদানটিতে ক্যোয়ারী প্যারামগুলি পেতে চাই । আমি পরম পেয়েছি location.search, যা দেখতে এরকম দেখাচ্ছে: ?key=valueতাই এটি অংশীদারি করা যায় না।

বিক্রিয়া-রাউটার ভি 4 এর সাথে ক্যোয়ারী প্যারামগুলি পাওয়ার সঠিক উপায় কী?

Question 2

ক্যোয়ারী স্ট্রিংগুলিকে পার্স করার ক্ষমতা ভি 4 এর বাইরে নেওয়া হয়েছিল কারণ বিভিন্ন বাস্তবায়নের সমর্থনের জন্য কয়েক বছর ধরে অনুরোধ রয়েছে। এটির সাথেই, টিম সিদ্ধান্ত নিয়েছে যে ব্যবহারকারীর পক্ষে বাস্তবায়ন কেমন তা সিদ্ধান্ত নেওয়া সবচেয়ে ভাল be আমরা একটি ক্যোরি স্ট্রিং lib আমদানি করার পরামর্শ দিই। এখানে আমি ব্যবহার করি

const queryString = require('query-string');

const parsed = queryString.parse(props.location.search);

আপনি new URLSearchParamsযদি কিছু নেটিভ চান তা ব্যবহার করতে পারেন এবং এটি আপনার প্রয়োজনের জন্য কাজ করে

const params = new URLSearchParams(props.location.search);
const foo = params.get('foo'); // bar

আপনি এখানে সিদ্ধান্ত সম্পর্কে আরও পড়তে পারেন

Question 3

প্রদত্ত উত্তরটি শক্ত।

আপনি যদি ক্যোরি -স্ট্রিংয়ের পরিবর্তে qs মডিউলটি ব্যবহার করতে চান (তারা জনপ্রিয়তার প্রায় সমান হয়), এখানে বাক্য গঠন রয়েছে:

const query = qs.parse(props.location.search, {
  ignoreQueryPrefix: true
})

IgnoreQueryPrefix বিকল্প নেতৃস্থানীয় প্রশ্ন চিহ্ন উপেক্ষা করার নয়।

Question 4

গৃহীত উত্তরটি ভাল কাজ করে তবে আপনি যদি অতিরিক্ত প্যাকেজ ইনস্টল করতে না চান তবে আপনি এটি ব্যবহার করতে পারেন:

getUrlParameter = (name) => {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    let regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    let results = regex.exec(window.location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
  };

দেওয়া হয়েছে http://www.google.co.in/?key=value

getUrlParameter('key');

ফিরে আসবে value

Question 5

এর URLSearchParamsমতো বাক্সের বাইরে ব্যবহার করার জন্য আরেকটি দরকারী পন্থা হতে পারে ;

  let { search } = useLocation();

   const query = new URLSearchParams(search);
   const paramField = query.get('field');
   const paramValue = query.get('value');

পরিষ্কার, পঠনযোগ্য এবং একটি মডিউল প্রয়োজন হয় না। নীচে আরও তথ্য;

Question 6

আমি প্রতিক্রিয়া রাউটার ভি 4 এর জন্য প্যারামগুলি নিয়ে গবেষণা করছিলাম এবং তারা এটি ভি 4 এর জন্য ব্যবহার করেনি, রাউটার ভি 2/3 প্রতিক্রিয়াটির মতো নয়। আমি অন্য একটি ফাংশন ছেড়ে যাব - সম্ভবত কেউ এটি সহায়ক বলে মনে করবে। আপনার কেবল এসআই 6 বা সরল জাভাস্ক্রিপ্টের প্রয়োজন।

function parseQueryParams(query) {
  //You get a '?key=asdfghjkl1234567890&val=123&val2&val3=other'
  const queryArray = query.split('?')[1].split('&');
  let queryParams = {};
  for (let i = 0; i < queryArray.length; i++) {
    const [key, val] = queryArray[i].split('=');
    queryParams[key] = val ? val : true;
  }
  /* queryParams = 
     {
      key:"asdfghjkl1234567890",
      val:"123",
      val2:true,
      val3:"other"
     }
  */
  return queryParams;
}

এছাড়াও, এই ফাংশনটি উন্নত করা যেতে পারে

Question 7

এহ?

queryfie(string){
    return string
        .slice(1)
        .split('&')
        .map(q => q.split('='))
        .reduce((a, c) => { a[c[0]] = c[1]; return a; }, {});
}

queryfie(this.props.location.search);

Question 8

আমি কেবল এটি তৈরি করেছি তাই আপনি যদি কোনও রাউটার ভি 4 বা তার চেয়ে কম সংস্করণ থেকে উচ্চতর প্রতিক্রিয়া আপডেট করে থাকেন তবে পুরো কোড কাঠামোটি (যেখানে আপনি রিডেক্স রাউটার স্টোর থেকে কোয়েরি ব্যবহার করবেন) পরিবর্তন করার দরকার নেই।

https://github.com/saltas888/react-router-query-middleware

Question 9

খুব সহজ

শুধু হুক ব্যবহার করুন useParams()

উদাহরণ:

রাউটার :

<Route path="/user/:id" component={UserComponent} />

আপনার কম্পোনেন টিতে:

export default function UserComponent() {

  const { id } = useParams();

  return (
    <>{id}</>
  );
}

Question 10

কোনও প্যাকেজের প্রয়োজন ছাড়াই:

const params = JSON.parse(JSON.stringify(this.props.match.params));

তারপরে আপনি এর সাথে সম্পর্কিত পরামিতিগুলিতে পৌঁছাতে পারেন params.id