I have a redux state setup for my map which looks like the following. https://gyazo.com/3f9d6b095b252dcd29146cf1e9254908 It works great a user is logged in and is perfect, however, it does not work currently from a cold start where you have to log in. This is because in my App.jsx, I am instantly using the selector to select the user login AND also the userID.

const App = () => {
  const user = useSelector(state=>state.user.currentUser)
  const userID = useSelector(state=>state.user.currentUser._id)

  console.log(user)

  return (
  // react-router-v5
  <Router>
      <Switch>
        <Route exact path="/">
          <Landing/>
        </Route>
        <Route exact path="/login">
          { user ? <Redirect to="/"/> : <LoginStandard/>}
        </Route>

        {user && userID &&
        <Route path={`/userprofile/${userID}`}>
          <UserProfile/>
          This is the unique user!
        </Route>
        }

      </Switch>
    </Router>
  )
};

export default App;

My issue is that although the user works fine if there's no user, userID will throw an error as below:

TypeError: Cannot read properties of null (reading '_id')

How do I do this so that the userID is only fired when the user exists? I can't call this outside the top level.

Furthermore, how would you recommend passing this const user/ const userID throughout my app? Through props?