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

问题描述

我想根据用户是否通过身份验证来呈现不同的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，然后在几秒钟后更改为另一状态。阻止它们顺序渲染的好方法是什么？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）