Реакт-маршрутизатор Маршрут с компонентом hoc для авторизации

Question

Я использую реагировать и реагировать маршрутизатор v4. У меня есть веб-API для запроса.

В данный момент я пытаюсь создать слой авторизации для проверки, может ли пользователь получить доступ к маршруту. Основная проблема заключается в том, что запрос будет асинхронным, и до тех пор, пока вызов не будет разрешен, маршрутизатор будет находиться в состоянии ожидания. Я не уверен в том, как я могу справиться с этой ситуацией, я новичок в реакциях и реакциях.

Итак, я создал функцию HOC, чтобы обернуть частный маршрут и зарегистрироваться там, с помощью ajax-вызова web-api, если у пользователя есть доступ.

Я не уверен, что это правильный способ проверки авторизации, и я застрял в проблеме.

коммутатор реакции-маршрутизатора

<Switch>
  {routes.map((route, idx) => {
    if (route.component) {
      if (route.private) {
        return withAutorization(<Route
          key={idx}
          path={route.path}
          exact={route.exact}
          name={route.name}
          render={props => (
            <route.component {...props} />
          )} />)
      } else {
        return (<Route
          key={idx}
          path={route.path}
          exact={route.exact}
          name={route.name}
          render={props => (
            <route.component {...props} />
          )} />)
      }
    } else {
      return (null)
    }
  })}
  <Redirect from="/" to="/404" />
</Switch>

HOC с компонентом авторизации

import React, { Component } from 'react';
import { Redirect } from 'react-router-dom';

// controller to handle the dao 
import authController from '../../controllers/authController/authController'
const controller = new authController()

// WrappedComponent will be the Route to be rendered if the user is authorized
const withAutorization = (WrappedComponent) => {
  class HOC extends Component {
    constructor(props) {
      super(props)

      // initial state, with loading
      this.state = {
        authorize: false,
        loading: true
      }
    }

    componentWillMount() {
      // the controller call the webapi and ask for authorization, returning a promise
      // the response will be a bool, true authorize, false unauthorize
      controller.hasAccess('action').then((response => {
        this.setState({
          authorize: response,
          loading: !response
        })
      }))
    }

    // loader
    loading() { return (<div className="animated fadeIn pt-1 text-center"><div className="sk-spinner sk-spinner-pulse"></div></div>) }

    content() {
      return (
        <WrappedComponent />
      )
    }

    render() {
      if (this.state.loading) {
        return <this.loading />
      } else {
        if (this.state.authorize) {
          return <this.content />
        } else {
          return (<Redirect to='/login' />)
        }
      }
    }
  }

  return HOC;
}

export default withAutorization;

В рабочей ситуации я жду, что при ожидании вызова загрузчик отображается и возвращается.

Если вызов разрешен, а ответ верный, я ожидаю, что контент будет показан с WrappedComponent и возвращен.

Если вызов разрешен, а ответ ложный, я жду, что ответ будет возвращен.

Но вместо этого я получил эту ошибку: Предупреждение: Ошибка типа проп: неверный проп children, предоставленный Switch, ожидается ReactNode. enter code here