Question

我目前正在通过路线变更通过我的状态，如下所示：

<Link to={{
           pathname:`/transactions/${props.transaction.id}`,
           state: {transaction: props.transaction}
         }}> View Details </Link>

我的逻辑是，如果＆＃34; location.state.transaction＆＃34;存在，不提取新数据，否则，获取数据。

现在的缺陷是当页面重新加载时。如果用户重新加载页面，应用程序需要获取新数据。我想＆＃34; location.state＆＃34;如果有重新加载会被清除，但显然状态保存在sessionStorage中。

我该如何解决这个问题？我每次都可以获取新数据，但是当查看详细信息时，它不应该获取数据。单击链接。

Answer 1

如果您使用的是 React 钩子，您可以直接使用 window.history 来清除状态而不触发重新渲染。这比使用 useHistory 钩子的 replace 方法更好，后者会导致您的组件重新渲染。

window.history.replaceState({}, document.title)

Answer 2

我也遇到了这个问题，最终我要做的是从React Router检索浏览器历史记录并清除特定的location.state属性。因此，在您的情况下，它将是transaction。我在componentDidMount中进行了此操作，以便在您第一次访问该页面后，该属性就不再存在了，

import createHistory from 'history/createBrowserHistory'

...

componentDidMount(){
    const history = createHistory();
    if (history.location.state && history.location.state.transaction) {
        let state = { ...history.location.state };
        delete state.transaction;
        history.replace({ ...history.location, state });
    }
}

Answer 3

使用状态后，再次调度空状态的操作以清除状态。

this.props.dispatch(replace({
  ...this.props.location,
  state: undefined
});

Answer 4

有一种更好的方法，而不使用3方库。

我们可以使用history.replace()

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/history.md

componentDidMount(){
 const {location,history} = this.props;
 //use the state via location.state
 //and replace the state via
 history.replace() 
}

Answer 5

我建议不要在此处使用location道具，而是创建一条路径为/transactions/:transactionId的路线（无论您在何处定义它们），并在其中插入transactionId在目标组件内部的props.match.params.transactionId属性。然后，在componentDidMount中，您可以调度API请求操作以获取交易。不要忘记从链接的道具中删除state参数。

Answer 6

这可能有用。

const history = useHistory();
// consume the history.location.state and reset the state
useEffect(() => {
    history.replace(`/transactions/${history.location.state.transaction.id}`, {});
  }, []);

如何在页面重新加载时清除react-router中的location.state？

6 个答案: