reactjs - Uncaught Invariant Violation: アンマウントされたコンポーネントで 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 was called on an unmounted component というエラーが表示されます。

だから私はそれを次のように変更しました：

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');
  }
})

しかし、リッスンは 1 回のルート変更で 2 回または 3 回起動していました。

上記のコードは正しいですか、またはそれを解決するためのより良い方法はありますか? 基本的に、誰かが localStorage からトークンを手動で削除した場合にログインするようにルーティングしたいだけです。

React、React ルーター、Redux、および React redux の最新バージョンを使用しています。

ありがとうございます。