title: withRouter not working correctly with redux - react redux react-router
body: <p>This is my initial state in <code>authReducer</code>.</p>
  <pre><code>const initialState = {
      token:'',
      isLogin:  false,
      error: {}
  };
  function AuthReducer(state = initialState, action) {
      switch(action.type){
          case AUTH_SUCCESS:
              return sessionStorage.setItem('token',action.payload),{
                  ...state,
                  isLogin: true,
                  token: action.payload,
                  error: {}
              };
          case AUTH_FAILED:
              return {
                  ...state,
                  isLogin: false,
                  token: '',
                  error: action.payload
              };
              default:
              return state
      }
  }
  export default AuthReducer;
  </code></pre>
  <p>This is my login component that works fine. User can authenticate and everything is working fine:</p>
  <pre><code>class Login extends Component {
      constructor(props){
          super(props);
          this.state ={
              username: '',
              password: ''
          }
      }
      onSubmit = e =&gt; {
          e.preventDefault();
  
          this.props.login(this.state.username, this.state.password);
      }
      
      render() {
         .....
          )
      }
  }
  
  const mapStateToProps = state =&gt; {
      return {
          get: { auth : state.AuthReducer}
      }
  }
  const mapDispatchToProps = dispatch =&gt; {
      return {
          login: (username, password) =&gt; {
              return dispatch(login(username, password));
          }
      };
  }
  export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Login));
  </code></pre>
  <p>And my router is something like this:</p>
  <pre><code>class App extends Component {
    constructor(props){
      super(props)
    }
    render() {
      let PrivateRoute = ({ component: ChildComponent, isLogin, ...rest}) =&gt; {
        console.log({...rest}, &quot;this is rest&quot;)
        return &lt;Route 
        {...rest}
          render={props =&gt; {
            if (!isLogin) {
              return &lt;Redirect to=&quot;/login&quot; /&gt;;
          } else {
            return &lt;ChildComponent {...props} /&gt;
          }
        }} /&gt;
      }
      return (
        &lt;div&gt;
            &lt;Home /&gt;
            &lt;Switch&gt;
            &lt;PrivateRoute path=&quot;/&quot; exact isLogin={this.props.auth.isLogin}  component={mainContent} /&gt;
            &lt;PrivateRoute path=&quot;/posts&quot; isLogin={this.props.auth.isLogin} component={Posts} /&gt;
            &lt;Route path=&quot;/login&quot;  component={Login} /&gt;
          &lt;/Switch&gt;
        &lt;/div&gt;
      );
    }
  }
  const mapStateToProps = state =&gt; {
    return {
      auth: state.AuthReducer
    }
  }
  const mapDispatchToProps = dispatch =&gt; {
    return {
      getUser: () =&gt; {
        return dispatch(getUser());
      }
    };
  }
  export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App));
  </code></pre>
  <p>In react-router, they said you must use <code>withRouter</code> from react-router-dom. my problem is login works fine. but I don't have access to my props in my <code>privateroute</code> so when react renders a new page my <code>isLogin</code> sets to false. I have some idea that router doesn't know about my redux or protected components cant are not aware of changes in props.all of my child components in my <code>PrivateRoute</code> are connected with react-redux.</p>