Question

我只是想更新我的reactjs应用中的url而不刷新页面或重新渲染我的组件。我怎样才能实现这个目标？

我试图按照以下方式执行此操作：

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

但它在我的案例中并不起作用。

以下是更详细说明的示例：

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

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

P.S。我在Search?subcategory=NtsApp变量

中有这个字符串searchQuery

Answer 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

更新网址而不刷新页面

1 个答案: