不是isAuthenticated在 all中调用，而是在PrivateRoutes你的中调用一次，Routes component这样检查只执行一次，然后将值作为 prop 传递。另请注意，在获取数据时保持加载状态

请注意，您的isAuthenticated函数是一个异步函数，因此您必须等到Promise得到解决。您可以使用async-await或采用传统的Promise方法

const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      isAuthenticated ? (
        <Component {...props} />
      ) : (
        <Redirect to={{ pathname: "/", state: { from: props.location } }} />
      )
    }
  />
);

const Routes = () => {
    const [state, setState] = useState({isLoading: true, authenticated: false});
    useEffect(() => {
      async function checkAuth() {
         const isAuth = await isAuthenticated();
         setState({isLoading: false, authenticated: isAuth});
     }
      checkAuth();
   }, []);
    if(state.isLoading) {
       return <Loader/>
    }
    return (
      <BrowserRouter>
        <Fragment>
          <Switch>
            <Route exact path="/" component={SignIn} />
            <PrivateRoute path="/app" isAuthenticated={state.authenticated} component={App} />
          </Switch>
          <ModalContainer />
        </Fragment>
      </BrowserRouter>
    );

}

export default Routes;

更新：由于你没有使用react的v16.8.0或更高版本，你可以使用类组件来实现上述逻辑

class Routes extends React.Component {
    state = {isLoading: true, authenticated: false};

    async componentDidMount() {
         const isAuth = await isAuthenticated();
         this.setState({isLoading: false, authenticated: isAuth});
    }

    render() {
        if(state.isLoading) {
           return <Loader/>
        }
        return (
          <BrowserRouter>
            <Fragment>
              <Switch>
                <Route exact path="/" component={SignIn} />
                <PrivateRoute path="/app" isAuthenticated={state.authenticated} component={App} />
              </Switch>
              <ModalContainer />
            </Fragment>
          </BrowserRouter>
        );
      }

}

export default Routes;

这可能是因为isAuthenticated()返回一个被视为真值的 Promise，因此三元条件将呈现组件。

试试这个：

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={async (props) => {
      const authenticated = await isAuthenticated();
      return authenticated ? (
        <Component {...props} />
      ) : (
        <Redirect to={{ pathname: "/", state: { from: props.location } }} />
      )
    }
    }
  />
);

我认为这应该有效，除非组件的renderpropRoute不允许异步函数。

我建议您存储您的进度并根据它返回：

const PrivateRoute = ({ component: Component, ...rest }) => (
  const [finished, setFinished] = useState(false);
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  useEffect(() => {
    isAuthenticated().then(result => {
      setFinished(true);
      setIsAuthenticated(result);
    });
  }, []);

  <Route
    {...rest}
    render={props =>
      finished && isAuthenticated ? (
        <Component {...props} />
      ) : finished && !isAuthenticated ? (
        <Redirect to={{ pathname: "/", state: { from: props.location } }} />
      ) : null
    }
  />
);

为了等待Promise解决您可以显示加载消息时的结果isAuthenticated()是undefined：

const PrivateRoute = ({ component: Component, ...rest }) => {
    const isAuthenticated = isAuthenticated();


    if (isAuthenticated === undefined) {
        return <p>
           Loading ...
        </p>
    }
    return isAuthenticated ?
    <Route  {...rest} render={props => <Component {...props}/>} /> :
    <Redirect to={{ pathname: "/", state: { from: props.location } }} />
}