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

Question

मैं अपने मार्गों में एक मार्ग को कैसे परिभाषित कर सकता हूं __firebase_request_key। अपने सर्वर से रीडायरेक्ट के बाद ट्विटर के एकल संकेत द्वारा उत्पन्न URL से पैरामीटर मान को कैप्चर करने के लिए jsx फ़ाइल ?

http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla

मैंने निम्नलिखित मार्गों विन्यास के साथ प्रयास किया, लेकिन :redirectParamउल्लेखित परम को नहीं पकड़ रहा है:

<Router>
  <Route path="/" component={Main}>
    <Route path="signin" component={SignIn}>
      <Route path=":redirectParam" component={TwitterSsoButton} />
    </Route>
  </Route>
</Router>

Comments

यहाँ

— vsync

दुर्भाग्यपूर्ण है कि सवाल "क्वेरी स्ट्रिंग्स" कहता है, लेकिन वास्तव में "url मापदंडों" के बारे में पूछ रहा है

— SeanMC

query strings"? var1 = val & var2 = val2" url paramters,: "/ तस्वीरें /: companyiD / नया"

— Maddocks

Answer 1

अभिक्रिया राउटर v3

रिएक्ट राउटर पहले से ही आपके लिए स्थान को पार्स कर देता है और इसे प्रॉप्स के रूप में आपके रूटकंपोनेंट को भेज देता है । आप क्वेरी (के बाद? Url में) के माध्यम से पहुँच सकते हैं

this.props.location.query.__firebase_request_key

यदि आप पथ पैरामीटर मानों की तलाश कर रहे हैं, तो एक बृहदान्त्र के साथ अलग (:) राउटर के अंदर, ये माध्यम से सुलभ हैं

this.props.match.params.redirectParam

यह देर से प्रतिक्रिया रूटर v3 संस्करणों (जो निश्चित नहीं है) पर लागू होता है। पुराने राउटर संस्करणों का उपयोग करने की सूचना दी गई थी this.props.params.redirectParam।

प्रतिक्रिया रूटर v4 और प्रतिक्रिया रूटर v5, सामान्य

रिएक्ट राउटर v4 आपके लिए क्वेरी को और अधिक पार्स नहीं करता है, लेकिन आप केवल इसके माध्यम से ही एक्सेस कर सकते हैं this.props.location.search। कारणों के लिए nbeuchat का उत्तर देखें ।

जैसे आप कर सकते हैं आयातित qs पुस्तकालय के साथqs

qs.parse(this.props.location.search, { ignoreQueryPrefix: true }).__firebase_request_key

एक अन्य पुस्तकालय क्वेरी-स्ट्रिंग होगा । खोज स्ट्रिंग को पार्स करने के कुछ और विचारों के लिए यह उत्तर देखें । यदि आपको IE-संगतता की आवश्यकता नहीं है, तो आप भी उपयोग कर सकते हैं

new URLSearchParams(this.props.location.search).get("__firebase_request_key")

कार्यात्मक घटकों के लिए आप this.props.locationहुक उपयोग के साथ प्रतिस्थापित करेंगे । ध्यान दें, आप उपयोग कर सकते हैं window.location.search, लेकिन यह परिवर्तनों पर प्रतिक्रिया प्रतिपादन को ट्रिगर करने की अनुमति नहीं देगा। यदि आपका (नॉन-फंक्शनल) कंपोनेंट सीधा बच्चा नहीं है, Switchतो आपको किसी भी राउटर को प्रॉप प्रदान करने के लिए राउटर का उपयोग करने की आवश्यकता है ।

सामान्य

nizam.sp करने का सुझाव

console.log(this.props)

किसी भी मामले में मददगार होगा।

Comments

इसके लिए प्रतिक्रिया राउटर को बदलने की आवश्यकता नहीं है।

— क्रिश्चियन

मैं चेतावनी नोट केconsole.dir() कारण उपयोग करने का सुझाव नहीं

— दूंगा

खैर, यह सिर्फ एक बार सामग्री को देखने के लिए है। आप केवल एक विराम बिंदु भी रख सकते हैं और डीबगर में इस.प्रॉप्स का मूल्यांकन कर सकते हैं। आजकल, यहां तक ​​कि कंसोल भी। काम करेगा (कम से कम क्रोम में आप उस तरह से मुद्रित मूल्यों का विस्तार कर सकते हैं) - और यहां तक ​​कि कंसोल भी। उत्पादन में उपयोग करने के लिए कुछ भी नहीं है।

— क्रिश्चियन

@ क्रिसटन मैं सिर्फ सादे जावास्क्रिप्ट का उपयोग कर समाप्त हुआ। const path = window.location.pathname; मुझे URL देता है। मैं फिर जिस तरह से मेरी ज़रूरत है, उसे पार्स कर सकता हूं। मैंने इसे अपने रिएक्ट कंपोनेंट में कंपोनेंटविलामाउंट लाइफ साइकल इवेंट में रखा।

— सैम

में react-router-domमैं का इस्तेमाल किया था withRouterइस काम करने के लिए!

— डेमॉन्फेमिस्ट

Answer 2

अभिक्रिया राउटर v4

का उपयोग करते हुए component

<Route path="/users/:id" component={UserPage}/> 

this.props.match.params.id

घटक स्वचालित रूप से मार्ग सहारा के साथ प्रदान किया जाता है।

का उपयोग करते हुए render

<Route path="/users/:id" render={(props) => <UserPage {...props} />}/> 

this.props.match.params.id

रूट प्रॉप्स को फंक्शन रेंडर करने के लिए पास किया जाता है।

Comments

मेरे पास एक समान समस्या थी कि मैं query paramsएक बच्चे के घटक में रिएक्ट राउटर v4 का उपयोग करके अपने ऐप के वर्तमान URL तक पहुंच सकता हूं। यदि आप इसके लिए देख रहे हैं query params, तो यह । रूटर रिएक्शन 4 में रिप्लेसमेंट को हटा दिया गया है (वर्तमान में v4.1.1 का उपयोग करके)। इसका उत्तर देखें: stackoverflow.com/a/43630848/1508105

— एलेक्स जॉन्सन

यह दुर्भाग्य से इस सवाल का जवाब नहीं देता है क्योंकि आपके पास जरूरी नहीं होगा /users/?q=...लेकिन आपके पास हो सकता है /user?q=...। आपको this.props.location.searchरिएक्ट राउटर v4 में उपयोग करना चाहिए और नीचे दिए गए मेरे उत्तर में बताए अनुसार परिणामों को पार्स करना चाहिए ।

— नबीुचत

यह सही जवाब है। this.props.location.searchअस्तित्व में नहीं है।

— निकजे

@ नाइक: आप कौन से रिएक्ट राउटर का उपयोग करते हैं?

— नब्बेचैट

Answer 3

अभिक्रिया राउटर v3

React Router v3 के साथ, आप क्वेरी-स्ट्रिंग this.props.location.search(? Qs1 = naisarg & qs2 = parmar) से प्राप्त कर सकते हैं । उदाहरण के लिए, साथ let params = queryString.parse(this.props.location.search)देना होगा{ qs1 : 'naisarg', qs2 : 'parmar'}

अभिक्रिया राउटर v4

React Router v4 के साथ, this.props.location.queryअब मौजूद नहीं है। आपको this.props.location.searchइसके बजाय उपयोग करने की आवश्यकता है और क्वेरी पैरामीटर को स्वयं या किसी मौजूदा पैकेज का उपयोग करके पार्स करें query-string।

उदाहरण

यहाँ React Router v4 और query-stringलाइब्रेरी का उपयोग करके एक न्यूनतम उदाहरण दिया गया है।

import { withRouter } from 'react-router-dom';
import queryString from 'query-string';

class ActivateAccount extends Component{
    someFunction(){
        let params = queryString.parse(this.props.location.search)
        ...
    }
    ...
}
export default withRouter(ActivateAccount);

तर्कसंगत

queryसंपत्ति को हटाने के लिए प्रतिक्रिया रूटर की टीम तर्कसंगत है:

कई लोकप्रिय पैकेज हैं जो क्वेरी स्ट्रिंग पार्सिंग / थोड़ा अलग तरीके से स्ट्रिंग करते हैं, और इनमें से प्रत्येक अंतर कुछ उपयोगकर्ताओं के लिए "सही" तरीका और दूसरों के लिए "गलत" हो सकता है। यदि रिएक्ट राउटर ने "सही" एक उठाया, तो यह केवल कुछ लोगों के लिए सही होगा। फिर, इसे अन्य उपयोगकर्ताओं के लिए उनके पसंदीदा क्वेरी पार्सिंग पैकेज में स्थानापन्न करने के लिए एक रास्ता जोड़ना होगा। रिएक्ट राउटर द्वारा खोज स्ट्रिंग का कोई आंतरिक उपयोग नहीं है जिसके लिए इसे कुंजी-मूल्य जोड़े को पार्स करने की आवश्यकता होती है, इसलिए इसे चुनने की आवश्यकता नहीं है कि इनमें से कौन सा "सही" होना चाहिए।

[...]

4.0 के लिए लिया जा रहा दृष्टिकोण सभी प्रकार की "बैटरी शामिल" सुविधाओं को अलग करना है और बस मूल रूटिंग पर वापस जाना है। यदि आपको क्वेरी स्ट्रिंग पार्सिंग या async लोडिंग या Redux एकीकरण या कुछ और बहुत विशिष्ट की आवश्यकता है, तो आप इसे विशेष रूप से अपने उपयोग के मामले के लिए एक पुस्तकालय के साथ जोड़ सकते हैं। कम cruft में पैक किया जाता है कि आप की जरूरत नहीं है और आप अपनी विशिष्ट वरीयताओं और जरूरतों के लिए चीजों को अनुकूलित कर सकते हैं।

आप पूरी चर्चा GitHub पर पा सकते हैं ।

Comments

अच्छी तरह से काम। यह समर 2018 के रूप में स्वीकृत उत्तर होना चाहिए।

— mmla

जब आप URLSearchParams

— SuperUberDuper

@SuperUberDuper एज और आईओएस सफारी के कारण - developer.mozilla.org/en-US/docs/Web/API/…

— ब्रायन बर्न्स

ज़रूर, लेकिन फिर बस URLSearchParams पॉलीफ़िल का उपयोग करें

— एंथनी मैनिंग-फ्रैंकलिन

Answer 4

जहां तक ​​मुझे पता है कि तीन तरीके हैं जो आप कर सकते हैं।

1. क्वेरी अभिव्यक्ति पाने के लिए नियमित अभिव्यक्ति का उपयोग करें।

2.आप ब्राउज़र एपीआई का उपयोग कर सकते हैं। वर्तमान url इस प्रकार है:

http://www.google.com.au?token=123

हम सिर्फ 123 प्राप्त करना चाहते हैं;

प्रथम

 const query = new URLSearchParams(this.props.location.search);

फिर

const token = query.get('token')
console.log(token)//123

3. 'क्वेरी-स्ट्रिंग' नामक तीसरी लाइब्रेरी का उपयोग करें। पहले इसे स्थापित करें

npm i query-string

फिर इसे वर्तमान जावास्क्रिप्ट फ़ाइल में आयात करें:

 import queryString from 'query-string'

अगला कदम वर्तमान यूआरएल में 'टोकन' प्राप्त करना है, निम्न कार्य करें:

const value=queryString.parse(this.props.location.search);
const token=value.token;
console.log('token',token)//123

आशा है ये मदद करेगा।

25/02/2019 को अपडेट किया गया

4. यदि वर्तमान url निम्न जैसा दिखता है:

http://www.google.com.au?app=home&act=article&aid=160990

हम मापदंडों को पाने के लिए एक फ़ंक्शन को परिभाषित करते हैं:

function getQueryVariable(variable)
{
        var query = window.location.search.substring(1);
        console.log(query)//"app=article&act=news_content&aid=160990"
        var vars = query.split("&");
        console.log(vars) //[ 'app=article', 'act=news_content', 'aid=160990' ]
        for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    console.log(pair)//[ 'app', 'article' ][ 'act', 'news_content' ][ 'aid', '160990' ] 
        if(pair[0] == variable){return pair[1];}
         }
         return(false);
}

हम 'सहायता' प्राप्त कर सकते हैं:

getQueryVariable('aid') //160990

Comments

URLSearchParams IE द्वारा समर्थित नहीं है (यदि यह किसी के लिए भी प्रासंगिक है :)

— क्रिश्चियन

@ क्रिसियन ठेठ आईई

— ट्रेवर वुड

Answer 5

React Router v4 में अब props.location.query ऑब्जेक्ट नहीं है ( जीथूब चर्चा देखें )। तो स्वीकृत उत्तर नए प्रोजेक्ट के लिए काम नहीं करेगा।

V4 के लिए एक समाधान एक बाहरी लाइब्रेरी क्वेरी-स्ट्रिंग का उपयोग पार्स करने के लिए हैprops.location.search

const qs = require('query-string');
//or
import * as qs from 'query-string';

console.log(location.search);
//=> '?foo=bar'

const parsed = qs.parse(location.search);
console.log(parsed);
//=> {foo: 'bar'}

Comments

मेरे लिए कुछ कारणों से क्यूसेपर्स के परिणाम:{'?foo': 'bar'}

— क्रिस

@ क्रिस var prefixed = qs.parse('?a=b&c=d', { ignoreQueryPrefix: true });को इसे ठीक करना चाहिए। यहाँ पाया गया उदाहरण: github.com/ljharb/qs

— एलन शापिरा

Answer 6

रिएक्ट हुक का उपयोग करते समय कोई एक्सेस नहीं है this.props.location। Url पैरामीटर कैप्चर करने के लिए windowऑब्जेक्ट का उपयोग करें ।

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

Comments

यह एक अद्भुत उत्तर है। धन्यवाद।

— ल्यूकवेंटर

आप एक ही परिणाम प्राप्त करने के लिए विंडो ऑब्जेक्ट के बजाय "प्रतिक्रिया-राउटर-डोम" से "यूटीलोकेशन" का उपयोग कर सकते हैं।

— चस्मातु

URLSearchParams IE डेवलपर.

— mozilla.org/en-US/docs/Web/API/URLSearchParams/…

इसके अतिरिक्त, window.location पर पहुंचने से परिवर्तनों पर रिएक्ट के पुन: रेंडर को ट्रिगर करने की अनुमति नहीं मिलेगी।

— क्रिश्चियन

Answer 7

अभिक्रिया राउटर v4

const urlParams = new URLSearchParams(this.props.location.search)
const key = urlParams.get('__firebase_request_key')

कृपया ध्यान दें कि यह वर्तमान में प्रायोगिक है।

यहां ब्राउज़र संगतता की जांच करें: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/URLSearchParams#Browser_compatibility

Comments

अच्छा समाधान लेकिन दुर्भाग्य से IE का समर्थन नहीं करता है (

— एंड्री पटसीको

@AndreyPatseiko वहाँ उस github.com/WebReflection/url-search-params के

— पॉलीफ़िल है

Answer 8

आप प्रतिक्रिया-राउटर की जांच कर सकते हैं , सरल में, जब तक आप अपने राउटर में परिभाषित करते हैं, तब तक आप क्वेरी पैरामीटर प्राप्त करने के लिए कोड का उपयोग कर सकते हैं:

this.props.params.userId

Comments

यह ओपी के मामले में सही जवाब नहीं है । props.paramsURL params के लिए है (url सेगमेंट में उपसर्ग किए गए url सेगमेंट में): ( props.location.queryक्वेरी रूटर में), स्ट्रिंग स्ट्रिंग परम ('?') को स्टोर करता है और ओपी चाहता है।

— Matthieu Harlé

Answer 9

अभिक्रिया राउटर 5.1+

5.1 ने कई तरह के हुक पेश किए useLocationऔर useParamsजो यहां काम आ सकते हैं।

उदाहरण:

<Route path="/test/:slug" component={Dashboard} />

फिर अगर हम कहें तो

http://localhost:3000/test/signin?_k=v9ifuf&__firebase_request_key=blablabla

आप इसे पुनः प्राप्त कर सकते हैं

import { useLocation } from 'react-router';
import queryString from 'query-string';

const Dashboard: React.FC = React.memo((props) => {
    const location = useLocation();

    console.log(queryString.parse(location.search));

    // {__firebase_request_key: "blablabla", _k: "v9ifuf"}

    ...

    return <p>Example</p>;
}

Answer 10

अगर आपका राउटर ऐसा है

<Route exact path="/category/:id" component={ProductList}/>

आपको वह आईडी इस तरह मिलेगी

this.props.match.params.id

Comments

क्या किसी को पता है कि यह रिएक्ट राउटर 5.0.1 में कैसे काम करता है? this.props.match.params हमेशा खाली होता है।

— मार्क ए। टैगेलिएफेरो

@ MarkA.Tagliaferro किसी रूट द्वारा प्रस्तुत किए जा रहे घटकों के लिए केवल प्रोप ही योग्य है। यदि आपके घटक के लिए ऐसा नहीं है, तो आप अपने घटक को withRouter HOC में लपेटकर उन तक पहुँच सकते हैं।

— जिमी लॉन्गले

Answer 11

इस वन-लाइनर के साथ, आप इसे सादे जावास्क्रिप्ट के साथ रिएक्ट हुक और रिएक्ट क्लास कंपोनेंट दोनों में कहीं भी उपयोग कर सकते हैं।

https://www.hunterisgod.com/?city=Leipzig

let city = (new URLSearchParams(window.location.search)).get("city")

Answer 12

यदि आपको नहीं मिल रहा है this.props... आप अन्य उत्तरों के आधार पर अपेक्षा कर रहे थे, तो आपको उपयोग करने की आवश्यकता हो सकती है withRouter( डॉक्स v4 ):

import React from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router'

// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

  render() {
    const { match, location, history } = this.props

    return (
      <div>You are now at {location.pathname}</div>
    )
  }
}

// Create a new component that is "connected" (to borrow redux terminology) to the router.  
const TwitterSsoButton = withRouter(ShowTheLocation)  

// This gets around shouldComponentUpdate
withRouter(connect(...)(MyComponent))

// This does not
connect(...)(withRouter(MyComponent))

Answer 13

मेरे पास इस मुद्दे को हल करने में एक कठिन समय था। यदि उपरोक्त कार्य में से कोई भी आप इसके बजाय यह कोशिश कर सकते हैं। मैं create-react-app का उपयोग कर रहा हूं

आवश्यकताएँ

प्रतिक्रिया-राउटर-डोम ":" ^ 4.3.1 "

समाधान

उस स्थान पर जहां राउटर निर्दिष्ट किया गया है

<Route path="some/path" ..../>

पैरामीटर नाम जोड़ें जिसे आप इस तरह से पास करना चाहते हैं

<Route path="some/path/:id" .../>

उस पृष्ठ पर जहां आप कुछ / पथ प्रदान कर रहे हैं, आप इसे इस तरह से पैरामीटर नाम कॉल आईडी देखने के लिए निर्दिष्ट कर सकते हैं

componentDidMount(){
  console.log(this.props);
  console.log(this.props.match.params.id);
}

अंत में जहाँ आप डिफ़ॉल्ट निर्यात करते हैं

export default withRouter(Component);

आयात शामिल करने के लिए याद रखें

import { withRouter } from 'react-router-dom'

जब कंसोल.लॉग (this.props) आप सक्षम हो जाएगा कि नीचे क्या पारित किया गया है। मज़े करो!

Comments

और अगर टाइपस्क्रिप्ट का उपयोग करना न भूलेंRouteComponentProps<{id: number}>

— थंडरडेव

आप कहाँ से जोड़ते हैं RouteComponentProps <{id: number}> ??

— चोक

टाइप करें Props = RouteComponentProps <{id: number}>;

— फफूंद

वर्ग MyClass React.PureComponent <Props> {

— pfeds

फिर कंपोनेंटडिमाउंट (उदाहरण के लिए), कॉन्स्ट माय माय = इस.प्रॉप्समैच.परम्स.िड;

— पफैड्स

Answer 14

React routerv4 के बाद से अब आपको query paramsसीधे इसके locationऑब्जेक्ट में नहीं देता है । कारण रहा है

कई लोकप्रिय पैकेज हैं जो क्वेरी स्ट्रिंग पार्सिंग / थोड़ा अलग तरीके से स्ट्रिंग करते हैं, और इनमें से प्रत्येक अंतर कुछ उपयोगकर्ताओं के लिए "सही" तरीका और दूसरों के लिए "गलत" हो सकता है। यदि रिएक्ट राउटर ने "सही" एक उठाया, तो यह केवल कुछ लोगों के लिए सही होगा। फिर, इसे अन्य उपयोगकर्ताओं के लिए अपने पसंदीदा क्वेरी पार्सिंग पैकेज में स्थानापन्न करने के लिए एक रास्ता जोड़ने की आवश्यकता होगी। रिएक्ट राउटर द्वारा खोज स्ट्रिंग का कोई आंतरिक उपयोग नहीं है जिसके लिए इसे कुंजी-मूल्य जोड़े को पार्स करने की आवश्यकता होती है, इसलिए इसे चुनने की आवश्यकता नहीं है कि इनमें से कौन सा "सही" होना चाहिए।

इसमें शामिल होने के बाद, यह सिर्फ आपके दृश्य घटकों में स्थान पार्स करने के लिए और अधिक समझ में आएगा। क्वेरी ऑब्जेक्ट की अपेक्षा कर रहे हैं।

आप इस तरह withRouterसे ओवरराइड करके उदारतापूर्वक कर सकते हैंreact-router

customWithRouter.js

import { compose, withPropsOnChange } from 'recompose';
import { withRouter } from 'react-router';
import queryString from 'query-string';

const propsWithQuery = withPropsOnChange(
    ['location', 'match'],
    ({ location, match }) => {
        return {
            location: {
                ...location,
                query: queryString.parse(location.search)
            },
            match
        };
    }
);

export default compose(withRouter, propsWithQuery)

Answer 15

componentDidMount(){
    //http://localhost:3000/service/anas
    //<Route path="/service/:serviceName" component={Service} />
    const {params} =this.props.match;
    this.setState({ 
        title: params.serviceName ,
        content: data.Content
    })
}

Comments

ढेर अतिप्रवाह में आपका स्वागत है! कृपया स्रोत कोड के साथ जवाब न दें। आपका समाधान कैसे काम करता है, इसके बारे में एक अच्छा विवरण प्रदान करने का प्रयास करें। देखें: मैं एक अच्छा जवाब कैसे लिखूं? । धन्यवाद

— sɐunıɔ ןɐ qɐp

संभवतः 'डेटा' प्राप्त करने के लिए नो-अनडेफ़ को परिभाषित नहीं किया गया है

— टॉम स्टिकेल

Answer 16

शायद थोड़ा देर से लेकिन यह प्रतिक्रिया हुक आपको URL क्वेरी में मान / सेट करने में मदद कर सकता है: https://github.com/rudyhuynh/use-url-search-params (मेरे द्वारा लिखित)।

यह साथ या बिना काम करता है react-router। नीचे आपके मामले में कोड नमूना है:

import React from "react";
import { useUrlSearchParams } from "use-url-search-params";

const MyComponent = () => {
  const [params, setParams] = useUrlSearchParams()
  return (
    <div>
      __firebase_request_key: {params.__firebase_request_key}
    </div>
  )
}

Comments

इस तरह के एक सरल लेकिन एक महान हुक प्रदान करने के लिए बहुत बहुत धन्यवाद!

— chr1s

Answer 17

this.props.params.your_param_name काम करेगा।

यह आपके क्वेरी स्ट्रिंग से परम प्राप्त करने का तरीका है।
कृपया console.log(this.props);सभी संभावनाओं का पता लगाने के लिए।

Answer 18

घटक में जहां आपको उन मापदंडों का उपयोग करने की आवश्यकता होती है जो आप उपयोग कर सकते हैं

this.props.location.state.from.search

जो पूरे क्वेरी स्ट्रिंग को प्रकट करेगा ( ?साइन के बाद सब कुछ )

Answer 19

React Router v4 में withRoute ही सही तरीका है

आप हिस्ट्री ऑब्जेक्ट की प्रॉपर्टीज़ और निकटतम राउटर मैच को री-राउटर उच्च-ऑर्डर घटक के माध्यम से प्राप्त कर सकते हैं। जब भी यह रेंडर करता है, तो लपेटे गए कंपोनेंट से अपडेटेड राउटर, लोकेशन और हिस्ट्री प्रॉप्स को पास करेगा।

import React from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router'

// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

  render() {
    const { match, location, history } = this.props

    return (
      <div>You are now at {location.pathname}</div>
    )
  }
}

// Create a new component that is "connected" (to borrow redux
// terminology) to the router.
const ShowTheLocationWithRouter = withRouter(ShowTheLocation)

https://reacttraining.com/react-router/web/api/withRouter

Answer 20

मैंने यूआरएल पैरामीटर को पार्स करने के लिए क्वेरी-स्ट्रिंग नामक एक बाहरी पैकेज का उपयोग किया।

import React, {Component} from 'react'
import { parse } from 'query-string';

resetPass() {
    const {password} = this.state;
    this.setState({fetching: true, error: undefined});
    const query = parse(location.search);
    return fetch(settings.urls.update_password, {
        method: 'POST',
        headers: {'Content-Type': 'application/json', 'Authorization': query.token},
        mode: 'cors',
        body: JSON.stringify({password})
    })
        .then(response=>response.json())
        .then(json=>{
            if (json.error)
                throw Error(json.error.message || 'Unknown fetch error');
            this.setState({fetching: false, error: undefined, changePassword: true});
        })
        .catch(error=>this.setState({fetching: false, error: error.message}));
}

Answer 21

जब आप प्रतिक्रिया मार्ग डोम के साथ काम करते हैं तो मैच के लिए ऑब्जेक्ट को खाली कर देंगे लेकिन यदि आप निम्न कोड करते हैं तो यह es6 घटक के लिए और साथ ही यह सीधे फ़ंक्शन घटक के लिए काम करता है

import { Switch, Route, Link } from "react-router-dom";

<Route path="/profile" exact component={SelectProfile} />
<Route
  path="/profile/:profileId"
  render={props => {
    return <Profile {...props} loading={this.state.loading} />;
  }}
/>
</Switch>
</div>

इस तरह आप प्रॉपर और मैच परमेस और प्रोफाइल आईडी प्राप्त कर सकते हैं

यह es6 घटक पर काफी शोध के बाद मेरे लिए काम किया।

Answer 22

कहते हैं कि एक यूआरएल इस प्रकार है

http: // localhost: 3000 / कॉलबैक कोड = 6c3c9b39-de2f-3bf4-a542-3e77a64d3341

यदि हम उस URL से कोड निकालना चाहते हैं , तो नीचे विधि काम करेगी।

const authResult = new URLSearchParams(window.location.search); 
const code = authResult.get('code')

Comments

धन्यवाद!! एकदम सही जवाब।

— ताहा फारूकी

Answer 23

या शायद कुछ इस तरह से?

let win = {
  'location': {
    'path': 'http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla'
  }
}
if (win.location.path.match('__firebase_request_key').length) {
  let key = win.location.path.split('__firebase_request_key=')[1]
  console.log(key)
}

Answer 24

आप वर्तमान स्थान से खोज पैरामिक्स निकालने के लिए सरल हुक बना सकते हैं:

import React from 'react';
import { useLocation } from 'react-router-dom';

export function useSearchParams<ParamNames extends string[]>(...parameterNames: ParamNames): Record<ParamNames[number], string | null> {
    const { search } = useLocation();
    return React.useMemo(() => { // recalculate only when 'search' or arguments changed
        const searchParams = new URLSearchParams(search);
        return parameterNames.reduce((accumulator, parameterName: ParamNames[number]) => {
            accumulator[ parameterName ] = searchParams.get(parameterName);
            return accumulator;
        }, {} as Record<ParamNames[number], string | null>);
    }, [ search, parameterNames.join(',') ]); // join for sake of reducing array of strings to simple, comparable string
}

तब आप इसे अपने कार्यात्मक घटक के अंदर इस तरह उपयोग कर सकते हैं:

// current url: http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla
const { __firebase_request_key } = useSearchParams('__firebase_request_key');

// current url: http://localhost:3000/home?b=value
const searchParams = useSearchParameters('a', 'b'); // {a: null, b: 'value'}

Answer 25

export class ClassName extends Component{
      constructor(props){
        super(props);
        this.state = {
          id:parseInt(props.match.params.id,10)
        }
    }
     render(){
        return(
          //Code
          {this.state.id}
        );
}

Answer 26

let data = new FormData();
data.append('file', values.file);

Answer 27

---

सबसे सरल उपाय!

रूटिंग में:

   <Route path="/app/someUrl/:id" exact component={binder} />

प्रतिक्रिया कोड में:

componentDidMount() {
    var id = window.location.href.split('/')[window.location.href.split('/').length - 1];
    var queryString = "http://url/api/controller/" + id
    $.getJSON(queryString)
      .then(res => {
        this.setState({ data: res });
      });
  }