在反应中重新加载后坚持state

Question

一旦我通过将道具传递到特定页面 go 到特定页面，我希望能够重新加载页面而不会丢失 state，目前，当我重新加载时，页面会抛出错误，即缺少道具。 例如，如果我使用

history.push({ pathname: '/animal-details',animal_id: animal.id })它在这些下一页上显示详细信息，但是当我重新加载页面时，数据消失并且页面留空。 如何解决这个问题？ 谢谢你。

Answer 1

除了使用 localStorage 或 cookies 之外，我认为这是一个很好的情况，只需将animal_id作为路径的一部分。

而不是做

history.push({ pathname: '/animal-details',animal_id: animal.id })

我会做：

history.push(`/animal-details/${animal.id}`)

使用模板文字。

如果您使用react-router-dom ，您可以使用location道具或useLocation挂钩获取动物 ID。

const path = props.location.pathname.split('/')
const animalId = path[path.length - 1] // the animal id is the last value in the array

如果您出于某种原因不使用react-router-dom ，您也可以使用 vanilla js window.location.href执行类似的操作。

Answer 2

您可以使用：

localStorage.getItem('yourData');

或者