当用户未登录时显示导航栏。希望导航栏在用户拥有令牌后呈现

Question

I am struggling with getting my NavBar to not display/show until a user has logged in (received a token). I know you can set it up using a ternary but I am not able to get one to function. Wondering if anyone can help me write the code to have it function correctly.

import Auth from './Auth/Auth';
import Sitebar from './Home/Navbar';
import ReviewIndex from './Reviews/ReviewIndex';
import Navigation from './Home/Navigation'
import {
  BrowserRouter as Router //We are importing the specific part of the package BrowserRouter but calling it 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="/" //Redirects to localhost:3001 on click of logout
}

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

Try Replacing

<Navigation sessionToken={sessionToken} />

with

{sessionToken !== '' && <Navigation sessionToken={sessionToken} />}

Assuming that's the line you want to make conditional it will evaluate the sessionToken first and it will only reach the JSX code after the "&&" if the first part is true.