आप प्रतिक्रिया-राउटर में प्रोग्राम रूप से क्वेरी परम को कैसे अपडेट करते हैं?

Question

मैं यह पता नहीं लगा सकता कि कैसे उपयोग किए बिना प्रतिक्रिया-राउटर के साथ क्वेरी params को अपडेट किया जाए <Link/> । hashHistory.push(url)क्वेरी पैराम्स को पंजीकृत करने के लिए प्रतीत नहीं होता है, और ऐसा नहीं लगता है कि आप एक क्वेरी ऑब्जेक्ट या किसी भी चीज को दूसरे तर्क के रूप में पारित कर सकते हैं।

कैसे आप से यूआरएल बदल सकता हूँ /shop/Clothes/dressesकरने के लिए/shop/Clothes/dresses?color=blue में उपयोग किए बिना प्रतिक्रिया रूटर <Link>?

और क्या कोई onChangeफ़ंक्शन वास्तव में क्वेरी परिवर्तनों को सुनने का एकमात्र तरीका है? क्वेरी परिवर्तन स्वचालित रूप से क्यों नहीं पहचाने गए और प्रतिक्रिया व्यक्त की कि परम परिवर्तन हैं?

Comments

आपको इतिहास के सिंगलटन का उपयोग इस प्रश्न

— जोसेफ कॉम्ब्स

Answer 1

की pushविधि के भीतर hashHistory, आप अपने क्वेरी पैरामीटर निर्दिष्ट कर सकते हैं। उदाहरण के लिए,

history.push({
  pathname: '/dresses',
  search: '?color=blue'
})

या

history.push('/dresses?color=blue')

आप उपयोग करने पर अतिरिक्त उदाहरणों के लिए इस भंडार को देख सकते हैंhistory

Comments

बहुत बढ़िया! वैसे भी एक क्वेरी ऑब्जेक्ट को पास करने के लिए {color: blue, size: 10} एक स्ट्रिंग के बजाय है?

— cleaeablani

@claireablani वर्तमान में, मुझे नहीं लगता है कि समर्थित है

— जॉन एफ।

@claireablani आप यह कोशिश कर सकते हैंrouter.push({ pathname: '/path', state: { color: 'blue', size: 10 }, });

— माइकल

स्पष्टीकरण के लिए, यह अब प्रतिक्रिया राउटर v4 में काम नहीं करता है। उसके लिए, @ kristupas-repečka का उत्तर देखें

— dkniffin

अस्थिर समय हम रहते हैं।

— कृत्पास रेपेका

Answer 2

प्रतिक्रिया-राउटर v4, redux-thunk और अभिक्रिया-राउटर-redux (5.0.0-alpha.6) पैकेज का उपयोग करके उदाहरण।

जब उपयोगकर्ता खोज सुविधा का उपयोग करता है, तो मैं चाहता हूं कि वह एक सहयोगी को उसी क्वेरी के लिए url लिंक भेजने में सक्षम हो।

import { push } from 'react-router-redux';
import qs from 'query-string';

export const search = () => (dispatch) => {
    const query = { firstName: 'John', lastName: 'Doe' };

    //API call to retrieve records
    //...

    const searchString = qs.stringify(query);

    dispatch(push({
        search: searchString
    }))
}

Comments

react-router-reduxपदावनत किया जाता है

— vsync

मुझे लगता है कि यह अब <Redirect>टैग, डॉक्स पृष्ठ के

— TKAB

आप बस अपने घटक को withReducerएचओसी में लपेट सकते हैं जो आपको historyप्रस्ताव देगा। और तब तुम दौड़ सकते हो history.push({ search: querystring }।

— sasklacz

इसके बजाय react-router-redux, आप उपयोग कर सकते हैं connected-react-routerजो कि पदावनत नहीं है।

— सोरेन बोइसन

Answer 3

जॉन का जवाब सही है। जब मैं पाराम्स के साथ काम कर रहा हूं तो मुझे भी URLSearchParamsइंटरफ़ेस की आवश्यकता है:

this.props.history.push({
    pathname: '/client',
    search: "?" + new URLSearchParams({clientId: clientId}).toString()
})

आपको अपने घटक को withRouterएचओसी जैसे उदाहरण के साथ लपेटने की आवश्यकता हो सकती है । export default withRouter(YourComponent);।

Comments

withRouterएक एचओसी है, डेकोरेटर नहीं

— लुइस पाउलो

Answer 4

    for react-router v4.3, 

 const addQuery = (key, value) => {
  let pathname = props.location.pathname; 
 // returns path: '/app/books'
  let searchParams = new URLSearchParams(props.location.search); 
 // returns the existing query string: '?type=fiction&author=fahid'
  searchParams.set(key, value);
  this.props.history.push({
           pathname: pathname,
           search: searchParams.toString()
     });
 };

  const removeQuery = (key) => {
  let pathname = props.location.pathname; 
 // returns path: '/app/books'
  let searchParams = new URLSearchParams(props.location.search); 
 // returns the existing query string: '?type=fiction&author=fahid'
  searchParams.delete(key);
  this.props.history.push({
           pathname: pathname,
           search: searchParams.toString()
     });
 };


 ```

 ```
 function SomeComponent({ location }) {
   return <div>
     <button onClick={ () => addQuery('book', 'react')}>search react books</button>
     <button onClick={ () => removeQuery('book')}>remove search</button>
   </div>;
 }
 ```


 //  To know more on URLSearchParams from 
[Mozilla:][1]

 var paramsString = "q=URLUtils.searchParams&topic=api";
 var searchParams = new URLSearchParams(paramsString);

 //Iterate the search parameters.
 for (let p of searchParams) {
   console.log(p);
 }

 searchParams.has("topic") === true; // true
 searchParams.get("topic") === "api"; // true
 searchParams.getAll("topic"); // ["api"]
 searchParams.get("foo") === null; // true
 searchParams.append("topic", "webdev");
 searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
 searchParams.set("topic", "More webdev");
 searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
 searchParams.delete("topic");
 searchParams.toString(); // "q=URLUtils.searchParams"


[1]: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

Answer 5

गीताभ पर दिमित्रीदुश्किन से :

import { browserHistory } from 'react-router';

/**
 * @param {Object} query
 */
export const addQuery = (query) => {
  const location = Object.assign({}, browserHistory.getCurrentLocation());

  Object.assign(location.query, query);
  // or simple replace location.query if you want to completely change params

  browserHistory.push(location);
};

/**
 * @param {...String} queryNames
 */
export const removeQuery = (...queryNames) => {
  const location = Object.assign({}, browserHistory.getCurrentLocation());
  queryNames.forEach(q => delete location.query[q]);
  browserHistory.push(location);
};

या

import { withRouter } from 'react-router';
import { addQuery, removeQuery } from '../../utils/utils-router';

function SomeComponent({ location }) {
  return <div style={{ backgroundColor: location.query.paintRed ? '#f00' : '#fff' }}>
    <button onClick={ () => addQuery({ paintRed: 1 })}>Paint red</button>
    <button onClick={ () => removeQuery('paintRed')}>Paint white</button>
  </div>;
}

export default withRouter(SomeComponent);

Answer 6

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

http: // localhost: 3000 टोकन = xxx-xxx-xxx

componentWillMount() {
    var query = queryString.parse(this.props.location.search);
    if (query.token) {
        window.localStorage.setItem("jwt", query.token);
        store.dispatch(push("/"));
    }
}

यहां, मैं Google- पासपोर्ट प्रमाणीकरण के बाद अपने क्लाइंट को Node.js सर्वर से पुनः निर्देशित कर रहा हूं, जो कि क्वेरी परम के रूप में टोकन के साथ वापस रीडायरेक्ट कर रहा है।

मैं इसे क्वेरी-स्ट्रिंग मॉड्यूल के साथ पार्स कर रहा हूं, इसे सहेज रहा हूं और प्रतिक्रिया-राउटर-रेडक्स से पुश के साथ url में क्वेरी परम को अपडेट कर रहा हूं ।

Answer 7

मैं आपको नीचे दिए गए फ़ंक्शन का उपयोग करना पसंद करता हूं जो ES6शैली है:

getQueryStringParams = query => {
    return query
        ? (/^[?#]/.test(query) ? query.slice(1) : query)
            .split('&')
            .reduce((params, param) => {
                    let [key, value] = param.split('=');
                    params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : '';
                    return params;
                }, {}
            )
        : {}
};

Answer 8

इसे इस तरह भी लिखा जा सकता है

this.props.history.push(`${window.location.pathname}&page=${pageNumber}`)