React：在浏览器背面/页面之间持久化状态或数据

Question

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

我想要做的是在之前的页面中保持状态，即使您返回浏览器也是如此。像 twitter 或 instagram 一样，当您去关注或关注者页面并访问更多页面时，您返回时不会丢失数据。我找不到任何线索。 是和history api还是routing有关？

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

可能与全局状态（Recoil）无关，window 以某种方式记住了前几页中的内容（以及滚动位置）？

如果有任何建议，我将不胜感激。谢谢。

反应/盖茨比JS 路由器/Reach-router

路线

 ...

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

 ...

用户页面

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

关注页面

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 来全局记住值的状态