react-router4如何用事件监听路由变化？

Question

如下，4个路由，我想监听当路由切换到某个路由的时候能获取到这个path，如何监听呢？

<Route exact path="/" component={Index}/>
<Route exact path="/explore" component={Explore}/>
<Route exact path="/user" component={User}/>
<Route exact path="/mysites" component={MySites}/>

Answer 1

在切换路由后通过this.props.location.pathname可以获取当前路由的path

Answer 2

两种方案:

1. 如果你用了 redux，你可以用 react-redux-router 将当前的路由信息同步到 store 中。
2. 如果没有的话，你可以为所有的路由组件写个基类。例如：

class BaseRoute extends React.Component {
    componentDidMount() {
        this.props.onRouteEnter(this.props.match); // 这里你可以根据需要传更多信息
    }
}

然后你上面的代码中的 Index, Export, User, MySites 都继承自上面这个类。如：

class Index extends BaseRoute {}

然后就可以这样了：

<Route exact path="/" render={props => <Index {...props} onRouterEnter={match => this.handleRouterEnter(match)} />} />

实际上 ReactRouter v4 完全没必要这么做，不知道你的具体场景是啥，可以贴出来讨论下，说不定有更好的方案。