react router dom not re-rendering after connecting the router component with redux

Question

For some reason after I connect my Routes component with the connect() code - my components are causing re-rendering after clicking them. Can someone help explain what is wrong with this code? After commenting our the connect functions click my buttons cause re-rendering. I removed my import statements to reduce amount of code.

// List of routes that uses the page layout
// listed here to Switch between layouts
// depending on the current pathname
const listofPages = [
    /* See full project for reference */
];

class Routes extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            hideNavigation: false
        };
    };

    toggleHeader = () => {
        const { hideNavigation } = this.state
        this.setState({ hideNavigation: !hideNavigation  })
    };

    render(){
        const currentKey = this.props.location.pathname.split('/')[1] || '/';
        const timeout = { enter: 500, exit: 500 };

        // Animations supported
        //      'rag-fadeIn'
        //      'rag-fadeInRight'
        //      'rag-fadeInLeft'

        const animationName = 'rag-fadeIn'
        return (
            // Layout component wrapper
            // Use <BaseHorizontal> to change layout
            <Base hideNavigation={this.state.hideNavigation}>
              <TransitionGroup>
                <CSSTransition key={currentKey} timeout={timeout} classNames={animationName} exit={false}>
                    <div>
                        <Suspense fallback={<PageLoader/>}>
                            <Switch location={this.props.location}>

                                <Route 
                                    loggedIn={this.props.isLoggedIn}
                                    path="/login" 
                                    render={() => (<Login toggleHeader={this.toggleHeader} />)}
                                />

                                <PrivateRoute 
                                    loggedIn={this.props.isLoggedIn}
                                    path="/my-credentials" 
                                    component={MyCredentials}
                                />

                                <PrivateRoute 
                                    loggedIn={this.props.isLoggedIn}
                                    path="/submenu" 
                                    component={SubMenu}
                                />

                                <PrivateRoute 
                                    loggedIn={this.props.isLoggedIn} 
                                    path="/new-application" 
                                    toggleHeader={this.toggleHeader}
                                    component={NewApplication}
                                />

                                { this.props.isLoggedIn ? 
                                    <Redirect to="/submenu"/> : 
                                    <Redirect to="/login"/>
                                }

                            </Switch>
                        </Suspense>
                    </div>
                </CSSTransition>
              </TransitionGroup>
            </Base>
        )
    }
}

const mapStateToProps = (state) => {
    console.log(state)
    return {
        "isLoggedIn": state.auth.isLoggedIn
    }
}

const mapDispatchToProps = dispatch => ({ })

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(withRouter(Routes));

Answer 1

Change the order of the HOCs. So change

export default connect(mapStateToProps, mapDispatchToProps(withRouter(Routes));

to

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Routes));