title: How can I update High Order Component
body: <p>I created array of routing in ReactJS</p>
  
  <pre><code>const routes = [
    { id: 0, path: '/', view: Home, parent: 0 },
    { id: 1, path: '/a', view: Home2, parent: 0 },
    { id: 2, path: '/b', view: Home3, parent: 1 }
  ]
  </code></pre>
  
  <p>Created HOC withAuth which should back to parent routing when user isn't logged. When i going to route (as not logged) - its ok and withAuth back me to parent route, but when i am on route and logout page isn't refresh and I am stay on route for logged users.</p>
  
  <pre><code>import React, { Component } from "react";
  import AuthHelper from "./AuthHelper";
  
  export default function withAuth(AuthComponent) {
    const Auth = new AuthHelper();
  
    class AuthWrapped extends Component {
      constructor(props) {
        super(props);
  
        this.state = {
          confirm: null,
          loaded: false
        };
      }
  
      checkLogged = () =&gt; {
        if (!Auth.loggedIn()) {
  
          const parent = this.props.parent;
          const obj = this.props.routes
          .filter(v =&gt; v.id === parent);
          this.props.history.replace(obj[0].path);
  
        } else {
          try {
            const confirm = Auth.getConfirm();
            this.setState({
              confirm: confirm,
              loaded: true
            });
          } catch (err) {
            Auth.logout();
            this.props.history.replace("/");
          }
        }
      }
  
      componentDidMount() {
        this.checkLogged();
      }
  
      render() {
        if (this.state.loaded) {
          if (this.state.confirm) {
            return (
              &lt;AuthComponent
                history={this.props.history}
                confirm={this.state.confirm}
              /&gt;
            );
          } else {
            return null;
          }
        } else {
          return null;
        }
      }
    };
  
    return AuthWrapped;
  }
  </code></pre>