在不刷新页面的情况下更新 URL答案

【问题标题】：Update Url without refreshing page在不刷新页面的情况下更新 URL
【发布时间】：2017-03-24 10:21:24
【问题描述】：

我只想更新我的 reactjs 应用程序中的 url，而不刷新页面或重新渲染我的组件。我怎样才能做到这一点？

我正在尝试这样做：

this.props.location.query.t = searchQuery;
    hashHistory.replace(this.props.location);

但在我的情况下它不起作用。

这里是一个更详细的例子：

当前网址：http://localhost:3000/categories/Nts

必填网址： http://localhost:3000/Search?subcategory=NtsApp

附：我在searchQuery 变量中有这个字符串Search?subcategory=NtsApp

【问题讨论】：

您是否尝试过使用history 对象？具体history.pushState?
@evolutionxbox 请原谅我，但我可以从哪里导入pushstate 函数？我是从redux-router 导入的。但它不起作用。
这个应用在什么环境下运行？如果是浏览器，则不需要导入历史对象，因为它是全局可访问的对象。
是的，你是对的。我刚刚使用了histroy.pushstate。网址已更新，但也已重新路由
不应该是..."Note that the browser won't attempt to load this URL after a call to pushState()"。除非 redux 中的某些东西正在监听 onpopstateevent。

标签： javascript reactjs react-router react-router-redux

【解决方案1】：

您可以轻松地使用 react-router。假设您想使用 _onButtonClick 方法在按钮单击时更新 url。它应该是这样的：

_onButtonClick () {
    const { pathname } = this.props.location; // I asume you are on page Search

    // query should be an object, so in your case it will be
    const query = { subcategory: 'NtsApp' };  

    this.context.router.replace({
        pathname: pathname,
        query: query
    })
}

你只需要指定你的组件 contextTypes：

YourComponent.contextTypes = {
    router: React.PropTypes.object
};

以上仅适用于顶级组件（由 react-router 管理）。要使其在子组件上工作，您必须在上下文中传递位置：

export default class ChildComponent extends React.Component {

    constructor(props) {
        super(props);
    }

    getChildContext() {
        return {
            location: this.props.location
        };
    }

}
ChildComponent.childContextTypes = {
    location: React.PropTypes.object
};

并使用它来代替 this.props.location。我认为这将完成这项工作:) 更多信息，建议您熟悉react-router API

【讨论】：