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

【问题标题】：React to url change within component with React Router 4?使用 React Router 4 对组件内的 url 更改做出反应？
【发布时间】：2018-04-19 13:25:51
【问题描述】：

我在不同的 url 上有一个可用的组件。这是我的 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，然后在组件setState 中基于prop 值。到目前为止，这有效，但我还需要组件中链接到其他其他状态的链接。当您在注册页面/状态时，我有一个登录链接。当您在登录页面/状态时，我有一个注册链接。

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

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

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

【问题讨论】：

只是 <Link to="/login">Log in</Link> 不会更新 URL 并以正确的状态为您重新加载组件？
不，你会期待吗？
是的。你从哪里导入Link 组件？
来自 React 路由器

标签： react-router-v4

【解决方案1】：

我可以在 SignUpAndRegister 组件第一次挂载时设置它的状态，然后每次收到新的道具时，例如当 url 更改时。

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

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

【讨论】：