React Router Dom useNavigate 导致整个应用程序重新加载/重新渲染，从而清除所有状态

Question

当我想在按钮单击时执行编程式前进导航或编程式返回导航时，React Router Dom

useNavigate()

会清除所有状态、redux 和上下文并恢复为初始状态。例如

<IconButton 
onClick={() => {
  navigate(-1)
}}>
  Go back
</IconButton>

单击返回上一页时，页面上的所有状态都恢复为初始状态。 请问有什么解决办法吗？

是的，我已经尝试过以下方法

<IconButton 
onClick={() => {
  navigate(-1 , { replace: true })
}}>
  Go back
</IconButton>

还有...

<IconButton 
onClick={() => {
  navigate(-1 , { replace: false })
}}>
  Go back
</IconButton>

没有一个有效。当我执行程序化导航时，如何保持之前的状态？

Answer 1

我认为，如果您使用react-router的链接元素进行导航或在

Parent and Child

元素之间推送其历史记录，则应保留父组件的状态。 但是，如果您在兄弟姐妹之间导航，那么要保留状态，您将需要使用某种存储（会话存储、本地存储或从某些数据库读取）

另一种解决方案是使用高阶组件，该组件将成为顶级组件（高于react-router），因此当位置发生变化时，您不会丢失状态中的信息。换句话说，你必须有一个总体状态。