如何根据用户是否通过身份验证显示导航栏？

Question

我想根据用户是否通过身份验证来呈现不同的Navbar视图，第一个版本适用于将具有“登录和注册”链接的新用户，第二个版本在获得授权后具有“个人资料”链接。当前，父级App组件会检查localStorage中是否存在令牌，然后将其发送到后端，并使用接收到的数据来设置用户。

function App() {
  const dispatch = useDispatch();

  dispatch(loadUser());

  return (
    <Router>
      <div className='App'>
        <Navbar />
        <div className='container'>
          <Switch>
            // Routes
          </Switch>
        </div>
      </div>
    </Router>
  );
}

我的导航栏组件

function Navbar() {
  const dispatch = useDispatch();
  const isAuthed = useSelector(state => state.auth.isAuthenticated);

  const onLogout = () => {
    dispatch(logoutUser());
    window.location = '/';
  };

  if (isAuthed) {
    return <AuthedNavbar onLogout={onLogout} />;
  } else {
    return <UnauthedNavbar />;
  }
}

但是，由于加载用户需要花费一些时间，因此未经身份验证的导航栏会首先呈现，这是因为初始状态为false，然后在几秒钟后更改为另一状态。阻止它们顺序渲染的好方法是什么？