React-router'da sorgu parametrelerini programlı olarak nasıl güncellersiniz?

Kullanmadan react-router ile sorgu parametrelerini nasıl güncelleyeceğimi bulamıyorum <Link/>. hashHistory.push(url)Görünüşe göre sorgu parametrelerini kaydetmiyor ve bir sorgu nesnesini veya herhangi bir şeyi ikinci bir argüman olarak iletebilecek gibi görünmüyor.

Nasıl gelen url değiştiririm /shop/Clothes/dressesiçin /shop/Clothes/dresses?color=bluetepki-yönlendirici kullanmadan <Link>?

Ve bir onChangeişlev gerçekten sorgu değişikliklerini dinlemenin tek yolu mudur? Sorgu değişiklikleri neden otomatik olarak algılanmıyor ve parametre değişikliklerinin olduğu gibi tepki vermiyor?

İçinde pushyöntemine hashHistory, kendi sorgu parametreleri belirtebilirsiniz. Örneğin,

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

veya

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

Kullanmaya ilişkin ek örnekler için bu depoya göz atabilirsiniz.history

React-router v4, redux-thunk ve react-router-redux (5.0.0-alpha.6) paketinin kullanıldığı örnek.

Kullanıcı arama özelliğini kullandığında, aynı sorgu için bir iş arkadaşına url bağlantısı gönderebilmesini istiyorum.

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

John'un cevabı doğru. Parametreler ile uğraşırken ayrıca URLSearchParamsarayüze ihtiyacım var :

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

Bileşeninizi withRouterörneğin bir HOC ile sarmalamanız gerekebilir . export default withRouter(YourComponent);.

    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

Gönderen GitHub'dan DimitriDushkin :

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

veya

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

Sorgu dizenizi kolaylıkla ayrıştırmak için bir modüle ihtiyaç duyduğunuzda sorgu dizesi modülünü kullanmak önerilir.

http: // localhost: 3000 belirteç = xxx-xxx-xxx

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

Burada, başarılı bir Google-Passport kimlik doğrulamasından sonra Node.js sunucusundan istemcime yeniden yönlendiriyorum, bu da sorgu parametresi olarak belirteçle geri yönlendiriyor.

Onu sorgu dizesi modülü ile ayrıştırıyorum, kaydediyorum ve url'deki sorgu parametrelerini react-yönlendirici-redux'ten push ile güncelliyorum .

Aşağıdaki ES6stil olan işlevi kullanmanızı tercih ederim :

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;
                }, {}
            )
        : {}
};

Bu şekilde de yazılabilir

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