React路由器Dom useNavigate会导致重新加载/重新呈现整个应用程序，从而清除所有状态。

Question

当我想执行编程导航或按钮单击返回导航时，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路由器的链接元素导航，或者在Parent and Child元素之间推送到它的历史记录，那么父组件的状态应该保持不变。但是，如果要在兄弟姐妹之间导航，则需要使用某种存储(会话存储、本地存储或从某些DB读取)来持久化状态。

另一种解决方案是使用高阶组件，它将是顶级组件(高于反应性路由器)，因此，当位置发生变化时，您不会丢失状态中的信息。换句话说，你必须有一个普遍的状态。