प्रतिक्रिया-राउटर v4 में क्वेरी पैरामीटर कैसे प्राप्त करें

Question 1

मैं अपनी परियोजना में प्रतिक्रिया-राउटर-डोम 4.0.0-beta.6 का उपयोग कर रहा हूं। मेरे पास निम्नलिखित जैसा एक कोड है:

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

और मैं HomePageघटक में क्वेरी परम प्राप्त करना चाहता हूं । मुझे location.searchपरम मिला है , जो इस तरह दिखता है: ?key=valueइसलिए यह अप्रकाशित है।

प्रतिक्रिया-राउटर v4 के साथ क्वेरी परम प्राप्त करने का सही तरीका क्या है?

Question 2

क्वेरी स्ट्रिंग को पार्स करने की क्षमता को V4 से बाहर निकाल दिया गया था क्योंकि विभिन्न कार्यान्वयन का समर्थन करने के लिए वर्षों से अनुरोध किए गए हैं। इसके साथ, टीम ने फैसला किया कि उपयोगकर्ताओं के लिए यह तय करना सबसे अच्छा होगा कि कार्यान्वयन कैसा दिखता है। हम एक क्वेरी स्ट्रिंग 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

मैं राउटर v4 के लिए पैरामेट्स के बारे में शोध कर रहा था, और उन्होंने इसका उपयोग v4 के लिए नहीं किया, राउटर v2 / 3 की तरह नहीं। मैं एक और फंक्शन छोड़ दूंगा - शायद किसी को यह मददगार लगे। आपको केवल es6 या सादे जावास्क्रिप्ट की आवश्यकता है।

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

यदि आपने राउटर v4 या उच्चतर संस्करण से कम प्रतिक्रिया करने के लिए अद्यतन किया है, तो मैंने इसे पूरा कोड संरचना (जहाँ आप Redux राउटर स्टोर से क्वेरी का उपयोग करते हैं) को बदलने की आवश्यकता नहीं है।

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