Como você atualiza programaticamente os parâmetros de consulta no react-router?


117

Não consigo encontrar como atualizar os parâmetros de consulta com react-router sem usar <Link/>. hashHistory.push(url)não parece registrar parâmetros de consulta e não parece que você pode passar um objeto de consulta ou qualquer coisa como um segundo argumento.

Como você altera o url de /shop/Clothes/dressespara /shop/Clothes/dresses?color=blueno react-router sem usar <Link>?

E uma onChangefunção é realmente a única maneira de ouvir as alterações da consulta? Por que as alterações de consulta não são detectadas e reagidas automaticamente da mesma forma que as alterações de parâmetros são?


você deve usar o singleton de história conforme referido nesta pergunta
Joseph Combs

Respostas:


143

Dentro do pushmétodo de hashHistory, você pode especificar seus parâmetros de consulta. Por exemplo,

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

ou

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

Você pode verificar este repositório para exemplos adicionais sobre como usarhistory


2
impressionante! Existe alguma maneira de passar um objeto de consulta {color: blue, size: 10} em vez de uma string?
claireablani

1
@claireablani Atualmente, não acho que seja compatível
John F.

1
@claireablani você pode tentar issorouter.push({ pathname: '/path', state: { color: 'blue', size: 10 }, });
MichelH

4
Apenas para esclarecimento, isso não funciona mais no roteador react v4. Para isso, veja a resposta de @kristupas-repečka
dkniffin

13
tempos instáveis ​​em que vivemos.
Kristupas Repečka

39

Exemplo usando o pacote react-router v4, redux-thunk e react-router-redux (5.0.0-alpha.6).

Quando o usuário usa o recurso de pesquisa, quero que ele envie o link da url da mesma consulta para um colega.

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

8
react-router-reduxestá obsoleto
vsync

Acho que agora isso deve ser feito renderizando a <Redirect>tag, link para a página de documentos
TKAB

2
Você pode apenas embrulhar seu componente em withReducerHOC, o que lhe dará o historysuporte. E então você pode correr history.push({ search: querystring }.
sasklacz

Em vez de react-router-redux, você pode usar o connected-react-routerque não está obsoleto.
Søren Boisen

29

A resposta de John está correta. Quando estou lidando com parâmetros, também preciso de URLSearchParamsinterface:

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

Você também pode precisar envolver seu componente com um withRouterHOC, por exemplo. export default withRouter(YourComponent);.


1
withRouteré um HOC, não um decorador
Luis Paulo

4
    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

3

De DimitriDushkin no 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

Usar o módulo de string de consulta é recomendado quando você precisa de um módulo para analisar sua string de consulta com facilidade.

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

Aqui, estou redirecionando de volta para meu cliente do servidor Node.js após a autenticação bem-sucedida do Google-Passport, que está redirecionando de volta com token como parâmetro de consulta.

Estou analisando-o com o módulo de string de consulta, salvando-o e atualizando os parâmetros de consulta na url com push de react-router-redux .


1

Eu prefiro que você use a função abaixo que é o ES6estilo:

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

Também pode ser escrito desta forma

this.props.history.push(`${window.location.pathname}&page=${pageNumber}`)
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.