reactjs-如何以编程方式更新react-router中的查询参数?

我似乎找不到不使用onChange来使用react-router更新查询参数的方法。/shop/Clothes/dresses?color=blue似乎没有注册查询参数,并且似乎不能将查询对象或其他任何参数作为第二个参数传递。

在不使用<Link>的情况下,如何将URL从onChange更改为/shop/Clothes/dresses?color=blue

onChange函数真的是侦听查询更改的唯一方法吗? 为什么没有自动检测到查询更改并对参数更改做出反应?

claireablani asked 2019-10-04T18:19:06Z
6个解决方案
76 votes

在25547581073229099092的push方法中,您可以指定查询参数。 例如,

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

要么

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

您可以在此资料库中查看有关使用history的其他示例

John F. answered 2019-10-04T18:19:28Z
29 votes

使用react-router v4,redux-thunk和react-router-redux(5.0.0-alpha.6)软件包的示例。

当用户使用搜索功能时,我希望他能够将相同查询的URL链接发送给同事。

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
    }))
}
Kristupas Repečka answered 2019-10-04T18:20:00Z
9 votes

约翰的答案是正确的。 当我处理参数时,我还需要withRouter接口:

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

您可能还需要使用255475921237101818752装饰器包装组件。 export default withRouter(YourComponent);

spedy answered 2019-10-04T18:20:32Z
2 votes

从GitHub上的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);
};

要么

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);
Design by Adrian answered 2019-10-04T18:20:59Z
2 votes

当您需要一个模块来轻松解析查询字符串时,建议使用查询字符串模块。

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

在这里,成功进行Google-Passport身份验证后,我将从Node.js服务器重定向回我的客户端,该身份验证使用令牌作为查询参数进行重定向。

我正在使用查询字符串模块解析它,保存它并通过react-router-redux的推送更新URL中的查询参数。

Balasubramani M answered 2019-10-04T18:21:44Z
1 votes

我希望您使用下面的功能为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;
                }, {}
            )
        : {}
};
AmerllicA answered 2019-10-04T18:22:10Z
translate from https://stackoverflow.com:/questions/40161516/how-do-you-programmatically-update-query-params-in-react-router