React conditional re-rendering not working using functional component

You should/could use a third "pending" state that is neither explicitly true or false, and wait for the GET request to resolve. Without this the private route component doesn't wait for the resolved state and uses the falsey ('') initial condition state and renders the redirect.

const PrivateRoute = props => {
  const [condition, setCondition] = useState(null);

  useEffect(() => {
    if (!condition) {
      getUserAccess();
    }
  }, [condition]);

  const getUserAccess = async () => {
    try {
      const response = await axios.get("/some-api");
      setCondition(response.data);
    } catch(err) {
      // handle any error logging, etc..
      setCondition(false); // clear "loading state" so redirect can happen
    }
  }

  if (condition === null) {
    return <Spinner />; // or any other "pending" UI indication
  }

  return condition ? (
    <Route {...props} />
  ) : (
    <Redirect to="/unauthorized/login"/>
  );
};

It's because your condition is !'' = false in the initial render.

So it's always got to your 2nd condition: <Redirect to="/unauthorized/login"/> without having a chance for useEffect to run.

To solve this, you will need to have a loading indicator to let your component know that you are waiting for the response:

Something like this:

const PrivateRoute = props => {
const [condition, setCondition] = useState('');
const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
    if (!condition) {
        getUserAccess();
    }
}, [condition]);

const getUserAccess = async () => {
    const response = await axios.get("/some-api");
    const status = response.data; /* status will either be true or false */
    setCondition(status);
    setIsLoading(false);
}

if (isLoading) return <h1>Loading...</h1>;

return condition ? (<Route path={props.path} exact={props.exact} component={props.component}/>) :
    (<Redirect to="/unauthorized/login"/>); 
};

export default PrivateRoute;

Axios is promise based library

const [condition, setCondition] = useState(false);

useEffect(() => {
        if (!condition) {
            axios.get("https://jsonplaceholder.typicode.com/posts/1")
            .then( (response) =>{
                //console.log(response.data)
                setCondition(response.data)
            })
            .catch(
                (error)=>{
                    console.log(error);
                }
            )
        }
    }, [condition]);