Question

我导航到另一个页面，其中正在传递一些数据，如下所示：

this.props.history.push({
  pathname: "/someotherpage",
  state: { somedata: somedata }
});

现在在/someotherpage上，我的render()方法中有一个条件，可以根据this.props.location.state是否不为空来显示组件。

{this.props.location.state && (
    <SomeComponent>
        {this.props.location.state.somedata}
    </SomeComponent>
)}

正在工作。但是，当我刷新页面时，<SomeComponent>仍然会显示，因为即使我刷新了，它仍然存储着this.props.location.state.somedata。刷新页面时如何将this.props.location.state清除为null？（虽然看起来很清楚，但是当导航时，只有在刷新时它才被保留。）

Answer 1

使用window.history.replaceState(null, '')清除值使用后的位置状态。

MDN Web Docs: History.replaceState()

History.replaceState（）方法修改当前历史记录条目，将其替换为方法参数中传递的stateObj，标题和URL

语法： history.replaceState（stateObj，title，[url]）;

将标题保留为空白并且url是可选的。

要点是它不会引起其他刷新。

Answer 2

尝试一下：

history.replace('', null);

Answer 3

作为一种解决方法，您可以添加以下功能，以区分 页面刷新 和 this.props.history.push 如下：

isPageRefreshed() { return window.performance && performance.navigation.type === 1; }

然后，当您要检查它是否已刷新或从其他页面重定向时，可以这样使用

{!this.isPageRefreshed && this.props.location.state && ( <SomeComponent> {this.props.location.state.somedata} </SomeComponent> )}

参考：https://stackoverflow.com/a/50026758/8777471

Answer 4

您可以使用replace method将历史记录状态替换为新状态：

export class Component extends component {
    componentDidMount() {
        const value = this.props.location.state.someValue;
        browserHistory.replace({
           pathname: '/some-path',
           state: {}
       });
    }
}

从https://stackoverflow.com/a/43494684/7479959

获得

如何在刷新时清除props.location.state？

4 个答案: