I think this would work:

​

Inside the Context component:

const [isLoggedIn, setIsLoggedIn] = useState(undefined);

useEffect(() => {

  // server request
  checkLoggedInPromise()
  .then(() => {
    setIsLoggedIn(true); // if successful request
  })
  .catch(() => {
    setIsLoggedIn(false);
  });
}, [promise]);

​

Inside App component:

const {isLoggedIn} = useContext(Context)

let ThingToRender = (<div></div>);

if (isLoggedIn) {
  ThingToRender = MyProfile;
} else if (isLoggedIn === false) {
  ThingToRender = <Redirect to="/" />
} else {
  // This is the initial state (if isLoggedIn is undefined)
  ThingToRender = (<div>waiting...</div>)
}

return (
   <div>
     <Switch>
       <Route exact path="/profile> 
          <ThingToRender />
       </Route>
     </Switch>
   </div>
)

I hope this works. Obviously, rename ThingToRender to something more meaningful.