Как проверить токен пользователя в приложении React, если запрос к серверу асинхронный?

Question

Я пытаюсь проверить токен пользователя через мой компонент класса PrivateRoute. Который должен отправить токен на сервер и получить ответ. Код в компоненте приложения выглядит следующим образом:

class App extends Component {
    render() {
        return (
            <Router history={history}>
                <div className="App">
                    <Switch>
                        <PrivateRoute path="/account" component={Account} />
                        <Route component={PublicLayout} />
                    </Switch>
                </div>
            </Router>
        )
    }
}

Но я столкнулся с проблемой. Метод render() компонента PrivateRoute запускается раньше, чем я получаю ответ от сервера из-за асинхронного запроса. Это код компонента PrivateRoute:

export class PrivateRoute extends Component {
    componentWillMount() {
        API.post('validate', {})
            .then(res => {
                if (res.data.validationResult) {
                    this.redirectToAccount = true
                } else {
                    this.redirectToAccount = false
                }
            })
            .catch(error => {
                console.log(error)
                this.redirectToAccount = false
            })
    }

    render() {
        const { component: Component, ...props } = this.props

        if (this.redirectToAccount) return <Component {...props} />
        return <SigninLayout />
    }
}

В этом случае React всегда отображает SigninLayout для аутентификации.

Каково решение такой ситуации?

Я думаю, что если я буду использовать setState() и componentDidMount(), это будет ужасно, потому что пользователь сначала увидит страницу входа, а после перенаправит на страницу учетной записи.