为什么不回来<Redirect to="/" />跑步？

Question

How come the return is not running? Is it because it is nested in 2 if statement? I am trying to do in in React, where I am checking the custom claims from Firebase, and if the user is an admin, then it will be redirected to the admin home page. Thanks~!

export default function() {
  const classes = useStyles();
  const { currentUser } = useContext(AuthContext);


    if (currentUser != null) {
      currentUser.getIdTokenResult().then(idTokenResult => {
        if (idTokenResult.claims.adminRole) {
          return <Redirect to="/adminHome" />;
        }
      });
    }

   return ( ... )
}

Answer 1

<Redirect to="/adminHome" /> can work, but not in your case. Because getIdTokenResult is async operation, and the return in the end of your component will return the result before the async getIdTokenResult operation will be finished. And when getIdTokenResult will complete, it's too late to return something.

To do a redirect, do next:

1. import history

   import {useHistory} from 'react-router-dom'

2. Use hook in component

   const history = useHistory()

And replace your code:

return <Redirect to="/adminHome" />;

to next:

history.push('/adminHome')

Answer 2

currently, your condition is not passing through. Just modify an if statement.

if (idTokenResult.claims && idTokenResult.claims.adminRole) {
          return <Redirect to="/adminHome" />;
 }

If idTokenResult.claims.adminRole exists in an initial render the you can also try this.props.history.push("/adminHome") return null; .