javascript - 导航到不同路由上的页面时暂时丢失状态

Question

function App() {
  const { user } = useContext(AuthContext);
  console.log(user);
  return (
    <Router>
      <Switch>
        <Route exact path="/">
          {user ? <Home /> : <Register />}
        </Route>
        <Route path="/login">{user ? <Redirect to="/" /> : <Login />}</Route>
        <Route path="/register">
          {user ? <Redirect to="/" /> : <Register />}
        </Route>
        <Route path="/messenger">
          {!user ? <Redirect to="/" /> : <Messenger />}
        </Route>
        <Route path="/profile/:username">
          {!user ? <Redirect to="/" /> : <Profile />}
        </Route>
        <Route path="*">
          {user ? <Profile /> : "404 ERROR: Page does not exists"}
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

在上面的APP中，<Messager />页面中有一个小部件，它将链接到<Profile />页面，反之亦然。在<Profile />页面内，还有另一个小部件将链接到不同的:username页面。

我注意到，当我单击页面内的小部件<Profile />以在不同页面之间来回导航时:username，状态被保留。

<Profile />但是，当我通过单击页面内的小部件导航到<Messager />页面时，状态最初会暂时丢失。我知道这是因为如果状态存在则检查显示一张图片，如果状态不存在则显示不同的图像。在切换到第一张图像之前，稍后的图像会暂时出现。

我能说的唯一区别是所有:username页面都在同一个页面中<Route>，而<Messager>位于一个单独的<Route>.

整个 APP 被包裹在一个useContext.

为什么会这样？解决方案是什么？

标签： javascriptreactjsdomfrontend