我目前正在通过我的状态改变路线，如下所示：
<Link to={{
pathname:`/transactions/${props.transaction.id}`,
state: {transaction: props.transaction}
}}> View Details </Link>
我的逻辑是，如果“location.state.transaction”存在，则不获取新数据，否则获取数据。
现在的缺陷是页面重新加载时。如果用户重新加载页面，应用程序需要获取新数据。我认为如果重新加载“location.state”会被清除，但显然状态保存在 sessionStorage 中。
我该如何解决这个问题？我每次都可以获取新数据，但是当单击“查看详细信息”链接时它不应该获取数据。
我也遇到了这个问题，我最终做的是从 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 });
}
}
不使用 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()
}
如果您使用的是 React 钩子，则可以window.history直接使用来清除状态而不触发重新渲染。这比使用useHistory钩子的replace方法要好，后者会导致您的组件重新渲染。
window.history.replaceState({}, document.title)
使用状态后，再次调度一个状态为空的动作来清理状态。
this.props.dispatch(replace({
...this.props.location,
state: undefined
});
我建议不要在location这里使用prop，而是创建一个带有 path: 的 Route（无论你在哪里定义它们）/transactions/:transactionId，并在目标组件内部transactionId的 prop 中捕获props.match.params.transactionId。然后在componentDidMount您可以调度 API 请求操作以获取事务。不要忘记state从链接的props中删除参数。