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

Question

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

कैसे आप <Link> का उपयोग किए बिना करने के लिए '/ दुकान/कपड़े /? रंग के कपड़े = ब्लू' प्रतिक्रिया रूटर में '/ दुकान/कपड़े/कपड़े' से यूआरएल बदल सकता हूँ?

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

Answer 1

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

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

या

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

आप देख सकते हैं इस अतिरिक्त उदाहरण के लिए repository पर history

Answer 2

का उपयोग कर DimitriDushkin on GitHub से:

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 3

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

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

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 
    })) 
}