使用 React Router 4 对组件内的 url 更改做出反应？

Question

我有一个组件可用于不同的 urls。这是我的 app.js

的简化版本

<Router>
        <Switch>
            <Route path="/login"
               render={() => {
                    return <SignUpAndRegister status="login" />;
                }}
            </Route>
            <Route path="/register"
                render={() => {
                    return <SignUpAndRegister status="register" />;
                }}
            </Route>
        </Switch>
    <Router>

我传递了status prop，然后在组件中根据prop 值设置状态。到目前为止这有效，但我还需要组件内的链接 link 到其他其他状态。当你在注册时 page/state 我有一个 link 可以登录。当你在登录 page/state 我有一个 link 注册。

这意味着我必须有一个 link 来更改 url 并调用一个函数来设置状态：

    <Link
      to="/login"
      onClick={() => this.registerOrLogin('login')}
      >
        Log in
    </Link>

当检测到 url 变化时，如何让组件状态发生变化？似乎 browserHistory 在 v4 之前就这样做了，但我找不到最新的解决方案。

Answer 1

我可以在 SignUpAndRegister 组件首次安装时设置状态，然后在每次收到新道具时设置状态，例如 url 更改时。

componentDidMount() {
    this.setState({ status: this.props.status });
}

componentWillReceiveProps(props) {
    this.setState({ status: props.status });
}

使用 React Router 4 对组件内的 url 更改做出反应？

React to url change within component with React Router 4?

react-router-v4