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

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()

The History.replaceState() method modifies the current history entry, replacing it with the stateObj, title, and URL passed in the method parameters

Syntax: history.replaceState(stateObj, title, [url]);

将标题留空是安全的，url 是可选的。

要点是它不会引起另一次刷新。