Wie aktualisiere ich programmgesteuert Abfrageparameter im React-Router?

Ich kann anscheinend nicht finden, wie Abfrageparameter mit dem React-Router ohne Verwendung aktualisiert werden können <Link/>. hashHistory.push(url)Es scheint keine Abfrageparameter zu registrieren, und es scheint nicht so, als könnten Sie ein Abfrageobjekt oder etwas anderes als zweites Argument übergeben.

Wie ändere ich die URL von /shop/Clothes/dressesin /shop/Clothes/dresses?color=bluein React-Router ohne zu verwenden <Link>?

Und ist eine onChangeFunktion wirklich die einzige Möglichkeit, auf Änderungen an Abfragen zu warten? Warum werden Abfrageänderungen nicht automatisch erkannt und auf die Parameteränderungen reagiert?

Innerhalb der pushMethode von hashHistorykönnen Sie Ihre Abfrageparameter angeben. Zum Beispiel,

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

oder

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

In diesem Repository finden Sie weitere Beispiele zur Verwendunghistory

Beispiel mit React-Router v4, Redux-Thunk und React-Router-Redux (5.0.0-alpha.6).

Wenn der Benutzer die Suchfunktion verwendet, möchte er, dass er einen URL-Link für dieselbe Abfrage an einen Kollegen senden kann.

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

Johns Antwort ist richtig. Wenn ich mit Params zu tun habe, brauche ich auch eine URLSearchParamsSchnittstelle:

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

Möglicherweise müssen Sie Ihre Komponente auch mit einem withRouterHOC umschließen, z. 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

Von DimitriDushkin auf 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);
};

oder

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

Die Verwendung des Abfragezeichenfolgenmoduls wird empfohlen, wenn Sie ein Modul benötigen, um Ihre Abfragezeichenfolge einfach zu analysieren.

http: // localhost: 3000? token = xxx-xxx-xxx

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

Hier leite ich nach erfolgreicher Google-Passport-Authentifizierung, die mit Token als Abfrageparameter zurückgeleitet wird, vom Node.js-Server zurück zu meinem Client.

Ich analysiere es mit dem Abfragezeichenfolgenmodul, speichere es und aktualisiere die Abfrageparameter in der URL mit Push von React -Router-Redux .

Ich bevorzuge, dass Sie die folgende Funktion verwenden, die ES6Stil ist:

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

Es kann auch so geschrieben werden

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