React:在浏览器后台/页面之间持久化状态或数据

Question

我正在使用React制作一个小型SNS应用程序。(Gatsby.js)

我想做的是在以前的页面中保持状态，即使当你回到浏览器。就像推特或instagram，当你去关注或关注页面并访问更多页面时，你不会在返回时丢失数据。我一点线索也找不到。它是否与历史api或路由有关?

还有一个用户页面，它包含一些链接到我的应用程序中的跟随/追随者页面。当用户到达页面时，我在useEffect钩子中使用url参数获取API，然后将其存储到全局状态(反冲)，显示在组件上。这里有一个问题。当我访问用户页面并向前移动到追随者页面时，然后从那里访问另一个用户页面并移动到他的追随者页面，当我回到浏览器时，他们不记得全局状态(当然)，它会再次获取显示加载的数据。试图在卸载时清理数据，因为当您转到其他页面时，它会显示以前的数据。找不到最后的练习

可能这与全局状态(反冲)无关，不知怎么的，window记住了前几页的内容(以及滚动位置)?

我很感激任何建议。谢谢你。

/GatsbyJS反应路由器/Reach-router

路线

...
<PrivateRoute path="/user/:userId" component={UserPage} />
<PrivateRoute path="/:userId/follower" component={FollowerPage} />
...

UserPage

const UserPage = () => {
const { userId } = useParams()
const user = useRecoilValue(userProfileViewData)
const loading = useRecoilValue(loadingUserPage) 
...
useEffect(() => {
... // fetch api to get user info
...// store it in global state -> userProfileViewData
}, [])
if(loading) return <div>Loading</div>
return (
<div>
<div>{user.name}</div>
...
<div onClick={() => navigate('/app/' + userId + '/follower')}>Follower</div>
...
</div>
)
}
export default UserPage

FollowerPage

const FollowerPage = () => {
const { userId } = useParams()
const [loading, setLoading] = useState(true)
const followerData = useRecoilValue(followers)
...  

useEffect(() => {
...// api calls to get followers
...// store it in global state -> followers

}, [])
useEffect(() => {
return () => {
.. // I have a function to clean data here
}
}, [])
if(loading) {
return <div>loading....</div>
}

return (
<div>
<div>Follower</div>
<div>
{followerData.map(user => (
<div key={`user.id}>
<div onClick={() => navigate(`/app/user/` + user.id)}>
{user.name}
</div>
</div>
))}
</div>
</div>
)
}
export default FollowerPage

Answer 1

也许你可以使用Redux全局记住值的状态