您可以使用用户上下文，在登录时，用户信息存储在localStorage和上下文API中。

const storeUser = ({user, token}) => {
  localStorage.setItem('user', JSON.stringify(user));
  localStorage.setItem('token', token);
  setUserState((prevUserState) => ({ ...prevUserState, user, token}));
};

那么只要你正确地实现了你的用户上下文，你的数据就会在整个网站上持久化。需要明确的是，如果正确实现了上下文，按下back将不会清除localStorage或user状态。
我担心，如果你试图在一个功能组件中实现它，数据将在重新渲染时被擦除。
如果您想检查用户是否已登录，则可以修改站点，使其仅允许已登录的用户访问，方法是：

{user.singedIn ? (<h1>Hello user</h1>) : (<h1>please sign in</h1>)

或者在你的路线上

<Route path='/' element={!user ? <Navigate replace to='/login' /> : <Home />} />

我认为您可以创建一个保护路由功能，将获取的令牌存储在本地存储中，并给予一个条件，即只要令牌可用，就不允许用户看到登录页面，然后您可以在handlogout中从本地存储中清除令牌