更新网址，无需刷新页面

我只想更新我reactjs应用中的网址，无需刷新页面或重新渲染我的组件。我怎样才能做到这一点？更新网址，无需刷新页面

我试图做到这一点，如下所示：

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

不过，这并不在我的情况下工作。

下面是例子更多的阐述：

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

所需网址：http://localhost:3000/Search?subcategory=NtsApp

附：我有这个字符串Search?subcategory=NtsApp in searchQuery variale

来源

2016-11-10 Muhammad Ateeq Azam

您是否尝试过使用['history']（https://developer.mozilla.org/en/docs/Web/API /历史）对象？特别是['history.pushState']（https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState（）_method）？ – evolutionxbox

@evolutionxbox原谅我，但从哪里我可以导入'pushstate'功能？我从'redux-router'导入它。但它不起作用。 –

此应用运行在什么环境？如果它是一个浏览器，那么历史对象不需要导入，因为它是一个全局可访问的对象。 – evolutionxbox

你可以很容易地使用react-router。假设您想要使用_onButtonClick方法更新按钮点击上的网址。它应该是这样的：

_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 
};

以上只会在顶级组件工作（通过反应路由器管理）。为了使它适用于子组件，您必须在上下文中传递位置：

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

来源

2016-11-10 12:35:12

更新网址，无需刷新页面

回答

相关问题