在反应中重新加载后保持状态

Question

一旦我通过将 props 传递到该页面进入特定页面，我希望能够重新加载页面而不丢失状态，目前，当我重新加载时，页面抛出一​​个错误，即 prop 丢失. 例如，如果我使用

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

Answer 1

您可以使用：

1. localStorage

localStorage.getItem('yourData');

或

2. Cookies

https://www.npmjs.com/package/react-cookie

Answer 2

除了使用 localStorage 或 cookie 之外，我认为将 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.

做类似的事情