Comment mettre à jour de manière programmatique les paramètres de la requête dans react-router ?

Question

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 deuxième argument.

Comment changer l'url de /shop/Clothes/dresses à /shop/Clothes/dresses?color=blue dans react-router sans utiliser <Link> ?

Et c'est un onChange La fonction d'écoute est vraiment le seul moyen d'écouter les changements de requête ? Pourquoi les modifications de requêtes ne sont-elles pas automatiquement détectées et traitées comme le sont les modifications de paramètres ?

Answer 1

Au sein de la push méthode 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 consulter cette dépôt pour des exemples supplémentaires sur l'utilisation de history

Answer 2

Exemple utilisant react-router v4, redux-thunk et le paquet react-router-redux(5.0.0-alpha.6).

Lorsque l'utilisateur utilise la fonction de recherche, je veux qu'il puisse envoyer le lien url de 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
    }))
}

Answer 3

La réponse de Jean est correcte. Lorsque je traite des paramètres, j'ai également besoin de URLSearchParams interface :

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

Vous pouvez aussi avoir besoin d'envelopper votre composant avec un withRouter décorateur, par exemple. export default withRouter(YourComponent); .

Answer 4

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

Answer 5

Utilisation de requête-chaîne est le module recommandé lorsque vous avez besoin d'un module qui analyse facilement votre chaîne de requête.

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 à partir du serveur Node.js après une authentification Google-Passport réussie, qui est redirigée avec le jeton comme paramètre de requête.

Je l'analyse avec le module query-string, je le sauvegarde et je mets à jour les paramètres de la requête dans l'url avec push from react-router-redux .