Javascript 对登录的主页和陌生人主页使用相同的路由

对于登录的主页和陌生人主页，有什么方法可以使用相同的主页路径：“/”？例如，登录后，用户将被重定向到“/”路由，其中包含登录的组件数据，如果用户注销，他也将被重定向到“/”，但其中包含主页数据

我有两个组件：HomePageLoggedIn和HomePage陌生人，我试图了解如何根据本地存储条件、道具或其他方式，在相同的“/”路径下显示它们

我尝试使用localStorage为登录设置一个布尔值，然后在App.js路由声明“/”-中检查localStorage是否为登录值的true或false。在我看来，这是不对的：

<Route exact path="/">
     {localStorage.getItem("isLoggedIn") &&
      localStorage.getItem("isLoggedIn").length > 0 ? (
         <HomePageLoggedIn />
        ) : (
         <HomePageStranger />
      )}
</Route>

{localStorage.getItem（“isLoggedIn”）&&
localStorage.getItem（“isLoggedIn”）。长度>0(
) : (
)}

---

问题是localStorage存储标志的速度慢于重定向发生的速度，因此用户在登录后登录到主页，并且只有在手动刷新页面后，他才会看到登录页面。

在其中更新本地存储值。React仅侦听状态和props值更改。相反，声明状态变量并将其设置为本地存储值，并使用新值和本地存储值更新状态值。U应该在内部使用状态值。您可以使用useEffect获取某个状态下的本地存储isLoggedIn值，然后您可以使用该状态在三元中执行相同的操作。如果路由中的渲染组件基于从本地存储读取值的状态进行更新，我相信用户仍然有很小的机会登录到登录后主页陌生人。也许有一种方法可以将道具从路由器传递到路由器，路由器决定呈现哪个组件：主页登录或主页陌生人。这样，当调用“/”路由时，它已经知道接下来要显示什么。