प्रतिक्रिया-राउटर हैश टुकड़े से क्वेरी पैरामीटर प्राप्त करना

Question

मैं ग्राहक पक्ष पर अपने आवेदन के लिए प्रतिक्रिया और प्रतिक्रिया-राउटर का उपयोग कर रहा हूं। मुझे यह पता नहीं लग सकता है कि url से निम्नलिखित क्वेरी पैरामीटर कैसे प्राप्त करें:

http://xmen.database/search#/?status=APPROVED&page=1&limit=20

मेरे मार्ग इस तरह दिखते हैं (पथ पूरी तरह से गलत है मुझे पता है):

var routes = (
<Route>
    <DefaultRoute handler={SearchDisplay}/>
    <Route name="search" path="?status=:status&page=:page&limit=:limit" handler={SearchDisplay}/>
    <Route name="xmen" path="candidate/:accountId" handler={XmenDisplay}/>
</Route>
);

मेरा मार्ग ठीक काम कर रहा है लेकिन मुझे यकीन नहीं है कि मुझे जो पैरामीटर चाहिए उन्हें प्राप्त करने के लिए मार्ग को कैसे प्रारूपित किया जाए। इस पर किसी भी मदद की सराहना!

Comments

मैंने चारों ओर देखा और केवल घटकों के भीतर क्वेरी स्ट्रिंग मापदंडों को निकालने के उदाहरण खोजने में सक्षम था,getCurrentQuery

— Cory Danielson

github.com/rackt/react-router/issues/209

— Cory Danielson

आप willTransitionToअपने हैंडलर पर हुक का उपयोग कर सकते हैं । यह क्वेरी स्ट्रिंग पैरामीटर प्राप्त करता है। github.com/rackt/react-router/commit/…

— Cory डेनियलसन

संक्रमण हुक पर डॉक्स के लिए भी यहां: github.com/rackt/react-router/blob/master/docs/api/compenders/… आपको एक बार यह पता लगाने के बाद अपने समाधान के साथ इस प्रश्न का उत्तर देना चाहिए। मुझे यकीन है कि आप इस स्थिति में टक्कर लेने वाले अंतिम व्यक्ति नहीं होंगे।

— कोरी डेनियलसन

Answer 1

नोट: टिप्पणी से कॉपी / पेस्ट किया गया। मूल पोस्ट को पसंद करना सुनिश्चित करें!

Es6 में लिखना और प्रतिक्रिया 0.14.6 / प्रतिक्रिया-राउटर 2.0.0-rc5 का उपयोग करना। मैं अपने घटकों में क्वेरी परम को देखने के लिए इस कमांड का उपयोग करता हूं:

this.props.location.query

यह url में सभी उपलब्ध क्वेरी परम का हैश बनाता है।

अपडेट करें:

React-Router v4 के लिए, यह उत्तर देखें । मूल रूप से, पैकेज या URLSearchParams केthis.props.location.search साथ क्वेरी स्ट्रिंग और पार्स प्राप्त करने के लिए उपयोग करें :query-string

const params = new URLSearchParams(paramsString); 
const tags = params.get('tags');

Comments

यह रिएक्ट-राउटर 1.x के बाद 2.x //// के रूप में कोई और तरीका नहीं है

— पीटर एरोन ज़ेंटाई

प्रति पीटर, यह उदाहरण पुराना है: देखें stackoverflow.com/a/35005474/298073

— 0

queryरिएक्ट राउटर में जाने लगता है। github.com/ReactTraining/react-router/issues/…

— गाया।

Answer 2

OLD (पूर्व v4):

Es6 में लिखना और प्रतिक्रिया 0.14.6 / प्रतिक्रिया-राउटर 2.0.0-rc5 का उपयोग करना। मैं अपने घटकों में क्वेरी परम को देखने के लिए इस कमांड का उपयोग करता हूं:

this.props.location.query

यह url में सभी उपलब्ध क्वेरी परम का हैश बनाता है।

अद्यतन (प्रतिक्रिया रूटर v4 +):

इस.प्रोपेक्टेशन। रिएक्ट 4 में रेकॉर्ड 4 को हटा दिया गया है (वर्तमान में v4.1.1 का उपयोग करके) इस मुद्दे के बारे में अधिक जानकारी के लिए: https://github.com/ReactTraining/react-router/issues/4410

ऐसा लगता है कि वे चाहते हैं कि आप क्वेरीज़ को पार्स करने के लिए अपनी स्वयं की विधि का उपयोग करें, वर्तमान में इस लाइब्रेरी का उपयोग करके अंतर को भरने के लिए: https://github.com/sindresorhus/query-string

Comments

मैंने रिएक्ट 0.14.8 के साथ परीक्षण किया है और आपका उत्तर प्रतिपादन कार्य नहीं करता है: त्रुटि TypeError: Cannot read property 'location' of undefined:: |

— थॉमस मोदिनेस

अरे @ThomasModeneis, क्या यह सबसे ऊपरी मूल घटक है जिसे आपका राउटर प्रदान कर रहा है? या यह एक बच्चा घटक है? अगर मुझे सही ढंग से याद है कि आपको यह पास करना है। माता-पिता घटक से अपने बच्चे के घटकों में यह रिप्लेसमेंट।

— मार्स

Answer 3

उपरोक्त उत्तर काम नहीं करेंगे react-router v4। यहाँ मैंने समस्या को हल करने के लिए क्या किया है -

पहले क्वेरी-स्ट्रिंग स्थापित करें जो पार्सिंग के लिए आवश्यक होगी।

npm install -save query-string

अब रूट किए गए घटक में आप अन-पार्स किए गए क्वेरी स्ट्रिंग को इस तरह एक्सेस कर सकते हैं

this.props.location.search

आप कंसोल में लॉग इन करके इसे चेक कर सकते हैं।

अंत में क्वेरी पैरामीटर तक पहुंचने के लिए पार्स करें

const queryString = require('query-string');
var parsed = queryString.parse(this.props.location.search);
console.log(parsed.param); // replace param with your own 

तो अगर क्वेरी की तरह है ?hello=world

console.log(parsed.hello) लॉग इन करेंगे world

Comments

या बिना किसी नुकसान के: const query = new URLSearchParams(props.location.search); console.log(query.get('hello'));(पुराने ब्राउज़रों के लिए पॉलीफिल की जरूरत है)।

— निन्ह फाम

यह काम करना चाहिए जब मैं एप्लिकेशन बनाता हूं, ठीक है?

— वाल्टर

Answer 4

अद्यतन 2017.12.25

"react-router-dom": "^4.2.2"

url की तरह

BrowserHistory: http://localhost:3000/demo-7/detail/2?sort=name

HashHistory: http://localhost:3000/demo-7/#/detail/2?sort=name

साथ क्वेरी स्ट्रिंग निर्भरता:

this.id = props.match.params.id;
this.searchObj = queryString.parse(props.location.search);
this.from = props.location.state.from;

console.log(this.id, this.searchObj, this.from);

परिणाम:

2 {sort: "name"} home

---

"react-router": "^2.4.1"

जैसे उर http://localhost:8080/react-router01/1?name=novaline&age=26

const queryParams = this.props.location.query;

queryParams एक वस्तु है जिसमें क्वेरी params शामिल हैं: {name: novaline, age: 26}

Comments

यदि आपके पास ऐसा कुछ है: http://localhost:8090/#access_token=PGqsashgJdrZoU6hV8mWAzwlXkJZO8ImDcn&expires_in=7200&token_type=bearer(अर्थात /बाद में नहीं #) तो राउटर v4 के लिए आपको location.hashइसके बजाय का उपयोग करना चाहिएlocation.search

— codeVerine

Answer 5

स्ट्रिंग पैकेज के साथ:

import qs from "stringquery";

const obj = qs("?status=APPROVED&page=1limit=20");  
// > { limit: "10", page:"1", status:"APPROVED" }

क्वेरी-स्ट्रिंग पैकेज के साथ:

import qs from "query-string";
const obj = qs.parse(this.props.location.search);
console.log(obj.param); // { limit: "10", page:"1", status:"APPROVED" } 

कोई पैकेज नहीं:

const convertToObject = (url) => {
  const arr = url.slice(1).split(/&|=/); // remove the "?", "&" and "="
  let params = {};

  for(let i = 0; i < arr.length; i += 2){
    const key = arr[i], value = arr[i + 1];
    params[key] = value ; // build the object = { limit: "10", page:"1", status:"APPROVED" }
  }
  return params;
};


const uri = this.props.location.search; // "?status=APPROVED&page=1&limit=20"

const obj = convertToObject(uri);

console.log(obj); // { limit: "10", page:"1", status:"APPROVED" }


// obj.status
// obj.page
// obj.limit

उम्मीद है की वो मदद करदे :)

हैप्पी कोडिंग!

Answer 6

"react-router-dom": "^5.0.0",

आपको अपने कंपोनेंट में कोई अतिरिक्त मॉड्यूल जोड़ने की आवश्यकता नहीं है जिसमें इस तरह का यूआरएल पता हो:

http: // localhost: 3000 / # /? प्राधिकरण '

आप निम्नलिखित सरल कोड आज़मा सकते हैं:

    const search =this.props.location.search;
    const params = new URLSearchParams(search);
    const authority = params.get('authority'); //

Answer 7

अन्य उत्तरों को पढ़ने के बाद (First by @ duncan-finney और फिर @Marrs द्वारा) मैं परिवर्तन लॉग को खोजने के लिए निकल पड़ा, जो इसे हल करने के मुहावरेदार प्रतिक्रिया-राउटर 2.x तरीके की व्याख्या करता है। स्थान का उपयोग करने पर प्रलेखन (जो आप प्रश्नों के लिए की जरूरत है) घटकों में वास्तव में वास्तविक कोड से खण्डन किया है। इसलिए यदि आप उनकी सलाह का पालन करते हैं, तो आपको इस तरह से बड़ी गुस्सा चेतावनी मिलती है:

Warning: [react-router] `context.location` is deprecated, please use a route component's `props.location` instead.

यह पता चला है कि आपके पास स्थान प्रकार का उपयोग करने वाली स्थान नामक एक संदर्भ संपत्ति नहीं हो सकती है। लेकिन आप लोकेशन नामक एक संदर्भ प्रॉपर्टी का उपयोग कर सकते हैं जो स्थान प्रकार का उपयोग करती है। तो समाधान उनके स्रोत पर एक छोटा सा संशोधन है:

const RouteComponent = React.createClass({
    childContextTypes: {
        loc: PropTypes.location
    },

    getChildContext() {
        return { location: this.props.location }
    }
});

const ChildComponent = React.createClass({
    contextTypes: {
        loc: PropTypes.location
    },
    render() {
        console.log(this.context.loc);
        return(<div>this.context.loc.query</div>);
    }
});

आप अपने बच्चों को उसी स्थान का केवल वही स्थान दे सकते हैं जो आप चाहते हैं। इसने वस्तु प्रकार में बदलने की चेतावनी को नहीं बदला। उम्मीद है की वो मदद करदे।

Answer 8

सरल जेएस समाधान:

queryStringParse = function(string) {
    let parsed = {}
    if(string != '') {
        string = string.substring(string.indexOf('?')+1)
        let p1 = string.split('&')
        p1.map(function(value) {
            let params = value.split('=')
            parsed[params[0]] = params[1]
        });
    }
    return parsed
}

और आप इसका उपयोग करके कहीं से भी कॉल कर सकते हैं:

var params = this.queryStringParse(this.props.location.search);

उम्मीद है की यह मदद करेगा।

Answer 9

क्वेरी-स्ट्रिंग मॉड्यूल का उपयोग करते समय एक अनुकूलित उत्पादन बिल्ड बनाते समय आपको निम्न त्रुटि मिल सकती है ।

इस फ़ाइल से कोड को छोटा करने में विफल:

इसे दूर करने के लिए, कृपया स्ट्रिंग नामक वैकल्पिक मॉड्यूल का उपयोग करें जो बिल्ड को चलाते समय किसी भी समस्या के बिना अच्छी तरह से एक ही प्रक्रिया करता है।

import querySearch from "stringquery";

var query = querySearch(this.props.location.search);