如何动态监听react-router路由变化？

Question

render() {
        const { classes } = this.props;

        return (
            <div className={classes.root}>
                <div className={classes.appFrame}>
                    <Topbar type={this.state.type} handleDrawerOpen={this.handleDrawerOpen}/>
                    {/*todo如何通过判断路由，设置这里的open和type值*/}
                    <Sidebar open={this.state.open} type={this.state.type}/>
                    <Route path="/mysites" component={SitesSidebar}/>
                    <main className={classNames(classes.content, (this.state.open && this.state.bodyWidth > 1024) && classes.contentShift)}>
                        <Route exact path="/" component={Index}/>
                        <Route path="/explore" component={Explore}/>
                        <Route path="/user" component={User}/>
                        <Route path="/mysites" component={MySites}/>
                    </main>
                </div>
            </div>
        );
    }

如：我现在触发了路由：'/explore'，然后监听到变化来动态改变上面代码中的Open和type值。

Answer 1

用withRouter这个高阶组件包裹你的组件，你就可以在组件中直接访问到路由信息了，从而根据路由path控制显示：
withRouter(YourComponent)
参考：https://reacttraining.com/rea...