Question

由于某种原因，我将Routes组件与connect（）代码连接后，我的组件在单击它们后导致重新渲染。有人可以帮忙解释一下此代码有什么问题吗？评论我们的连接功能后，单击我的按钮将导致重新渲染。我删除了导入语句以减少代码量。

// 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

更改HOC的顺序。因此，更改

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

到

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

将路由器组件与Redux连接后，反应路由器dom不重新渲染

1 个答案: