web-dev-qa-db-fra.com

Comment mettre à jour par programme les paramètres de requête dans react-router?

Je n'arrive pas à trouver comment mettre à jour les paramètres de requête avec react-router sans utiliser <Link/>. hashHistory.Push(url) ne semble pas enregistrer les paramètres de requête, et il ne semble pas que vous puissiez passer un objet de requête ou quoi que ce soit comme second argument.

Comment changez-vous l'URL de /shop/Clothes/dresses en /shop/Clothes/dresses?color=blue dans react-router sans utiliser <Link>?

Et une fonction onChange est-elle vraiment le seul moyen d'écouter les modifications de requête? Pourquoi les modifications de requête ne sont-elles pas automatiquement détectées et réagies à la manière dont les modifications de paramètres sont?

reactjsreact-router
78
claireablani

Dans la méthode Push de hashHistory, vous pouvez spécifier vos paramètres de requête. Par exemple,

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

ou

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

Vous pouvez vérifier ceci référentiel pour d'autres exemples d'utilisation de history

91
John F.

Exemple utilisant les packages react-routeur v4, redux-thunk et react-router-redux (5.0.0-alpha.6).

Lorsque l'utilisateur utilise la fonction de recherche, je veux qu'il puisse envoyer un lien URL pour la même requête à un collègue.

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
    }))
}
30
Kristupas Repečka

La réponse de John est correct. Quand j'ai affaire à des paramètres, j'ai aussi besoin de l'interface URLSearchParams:

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

Vous devrez peut-être aussi envelopper votre composant avec un withRouter HOC, par exemple. export default withRouter(YourComponent);.

12
spedy

De DimitriDushkin sur 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);
};

ou

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);
2
Design by Adrian

Utiliser query-string module est recommandé lorsque vous avez besoin d'un module pour analyser votre chaîne de requête facilement.

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("/"));
    }
}

Ici, je redirige vers mon client depuis le serveur Node.js après une authentification réussie avec Google Passport, qui redirige avec un jeton en tant que paramètre de requête.

Je suis en train de l'analyser avec le module query-string, de l'enregistrer et de mettre à jour les paramètres de requête dans l'URL avec Push from react-router-redux .

2
Balasubramani M
    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
1
Fahid M

Je préfère que vous utilisiez la fonction ci-dessous qui est du style 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;
                }, {}
            )
        : {}
};
1
AmerllicA