如何让导航栏在用户登录之前不显示？ [完毕]

Question

我正在努力让我的 NavBar 在用户登录（收到令牌）之前不显示/显示。 我知道你可以使用三元来设置它，但我无法让它发挥作用。 如果除三元之外的另一个选项可行，我对此表示同意。

import Auth from './Auth/Auth';
import Sitebar from './Home/Navbar';
import ReviewIndex from './Reviews/ReviewIndex';
import Navigation from './Home/Navigation'
import {
  BrowserRouter as Router
} from 'react-router-dom';


function App() {
  const [sessionToken, setSessionToken] = useState('');

  useEffect(() => {
  if (localStorage.getItem('token')){
    setSessionToken(localStorage.getItem('token'));
  }
}, [])

const updateToken = (newToken) => {
  localStorage.setItem('token', newToken);
  setSessionToken(newToken);
  console.log(sessionToken)
}

const clearToken = () => {
  localStorage.clear();
  setSessionToken('');
  window.location.href="/" 
}

const protectedViews = () => {
  return (sessionToken === localStorage.getItem('token') ? <ReviewIndex token={sessionToken}/>: <Auth updateToken={updateToken}/>)
}

  return (
    <div className="App">
      <Router>
      <Sitebar sessionToken={sessionToken} clickLogout={clearToken}/>
      <Navigation sessionToken={sessionToken} />
      {protectedViews()}
      </Router>
    </div>
  );
}

export default App;

Answer 1

我将采用的方法是我将使用 Turnary 运算符有条件地渲染它。 所以在这里，您在组件呈现后立即设置会话令牌，并且您只执行一次。

所以继承人你可以写什么来有条件地呈现这个。

{sessionToken ? "Put Jsx here that you want to render if they are authenticated" : "Put Jsx here to render if they are not authenticated"}

Answer 2

// css file

.navigation {
    visibility: 'hidden';
    // or 
    display: 'none';
}

// component
<Navigation className={sessionToken ? 'navigation': ''} />

这真的取决于你想做什么。 lizardcoder 的解决方案在用户登录之前根本不会挂载该组件。我的解决方案将隐藏它，但它会挂载。 如果您不想在用户登录之前在 Navigation 中初始化任何内容，那么 lizardcoder 是正确的方法。 如果你只是想隐藏它，css是一个很好的方法。