Неопределенное нарушение инварианта: findDOMNode был вызван для неустановленного компонента

Question

Настройка панели администратора:

// React modules
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { browserHistory } from 'react-router';

import { progressDone } from 'utils/nprogress-func';

// Admin Header section
import AdminHeader from '../admin-header/admin-header';


// Admin dashboard styling
import './styles/admin-dashboard';

class AdminDashboard extends Component {

  componentDidMount() {
    progressDone();
  }

  componentDidUpdate() {
    if(!localStorage.getItem('admin_log_toks')) {
        browserHistory.push('/admin-login');
    }
  }

  render() {
    if(this.props.isAuthenticated) {
      return (
        <div className="admin-dashboard">

          {/* admin-bg class has been styled in main.scss */}
          <div className="admin-bg"></div>

          <AdminHeader />

          <main>
            <div className="admin-content-wrapper">
              {this.props.children}
            </div>
          </main>
        </div>
      );
    } else {
      browserHistory.push('/admin-login');
      return (
        <div></div>
      );
    }
  }
}

// These props come from the application's
// state when it is started
function mapStateToProps(state) {

  const { authAdmin } = state;
  const { isAuthenticated } = authAdmin;

  return {
    isAuthenticated
  };
}

export default connect(mapStateToProps)(AdminDashboard);

У меня есть панель администратора с меню навигации.

<AdminHeader /> состоит из меню, которое направляет к различным разделам администратора и загружается с использованием AdminDashboards {this.props.children},

Я прибываю на панель администратора через форму входа и отправляется действие, которое устанавливает переменную isAuthenticated в true. После успешного входа isAuthenticated становится доступным для всех компонентов через редукторы. isAuthenticated устанавливается на основе токена, полученного от сервера, и затем токен сохраняется в localStorage браузера.

Но я также хотел проверить, что произойдет, если пользователь удалит токен из localStorage.

Я установил

funtion auth (state = {
  isAuthenticated: localStorage.getItem('token') ? true : false
})

Теперь, если пользователь вручную удаляет localStorage, то при обновлении пользователь отправляется обратно на экран входа в систему. Но я разрабатываю одностраничное приложение и хочу подтвердить, что когда пользователь перенаправляет на другой маршрут / URL без обновления, тогда токен в localStorage все еще существует.

Следовательно, я написал этот код:

componentWillReceiveProps() {
  if(!localStorage.getItem('admin_log_toks')) {
    browserHistory.push('/admin-login');
  }
}

Но я получаю ошибку Uncaught Invariant Violation: findDOMNode был вызван для неустановленного компонента.

Поэтому я изменил это на:

componentWillUpdate() {
  if(!localStorage.getItem('admin_log_toks')) {
    browserHistory.push('/admin-login');
  }
}

Тем не менее я получаю ту же ошибку. Итак, я изменил приведенный выше код:

componentWillUpdate() {
  if(!localStorage.getItem('admin_log_toks')) {
    setTimeout(function() {
      browserHistory.push('/admin-login');
    }, 10);
  }
}

Все работало, но по некоторым причинам я не думаю, что это правильный метод.

Сначала я попытался решить эту проблему при изменении маршрута:

browserHistory.listen(location => {
  if(!localStorage.getItem('admin_log_toks')) {
    browserHistory.push('/admin-login');
  }
})

Но слушай стрелял дважды или трижды только за одно изменение маршрута.

Правильный ли приведенный выше код, или есть лучший способ его решить? По сути, я просто хочу направить вход в систему, если кто-нибудь вручную удалит токен из localStorage.

Я использую последнюю версию React, React router, Redux и React redux.

Спасибо в ожидании.