更改路线时保持冗余状态

Question

我的webapp中有react redux和react router，我试图在保持redux状态的同时更改路由。我尝试了所有这些，它们都删除了redux状态：

props.history.push({ pathname: `/my-path`}); // did this using withRouter and useHistory
<Link to={'/my-path'} />cool link</Link>

我做错了什么？我该如何保持状态？(我不能将其保存在localStorage中的原因是，当用户关闭该页面时，数据应该会消失(

Answer 1

Redux不会在刷新网站后保留状态。如果要持久化数据，则应使用localStorage，并在浏览器或页面关闭后使用事件window.onunload对其进行清理。

看看这个要点

或者，当你像这个一样用程序导航时，你可以传递数据

import { useHistory } from 'react-router-dom'
...
function myComponentA() {
const history = useHistory()

const navigate = () => {
history.push('/pageB', {
id: 7,
name: 'Dan'
color: 'Red'
})
}

return <button onClick={navigate}>Go to page B</button>
}
...

在组件B中，使用钩子useLocation((，然后访问state属性，您应该可以在那里看到您的数据。

import { useHistory } from 'react-router-dom'
...
function myComponentB() {
const location = useLocation()
return <h1>{location.state.name}</h1>
}
...

需要我注意的是，如果你使用的是react router dom，链接按钮应该在redux存储中保留状态。只有在浏览器重新加载后，数据才会被清除。使用钩子和redux工具包检查这个示例，这可能是您问题的真正解决方案。导航到组件B后，该状态应保持不变。

有关更多文档，请参阅

Redux工具包：https://redux-toolkit.js.org/react路由器dom:https://reactrouter.com/web/guides/quick-start