Question

我在不同的网址上提供了一个组件。这是我app.js的简化版本

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

我传递状态prop，然后根据prop值传递组件setState。这工作到目前为止，但我还需要链接到其他其他状态的组件内的链接。当你在注册页面/状态我有一个登录链接。当您在登录页面/状态时，我有一个注册链接。

这意味着我必须有一个链接来更改网址并调用一个函数来设置setState：

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

如果检测到网址更改，如何更改组件状态？似乎browserHistory在v4之前做了这个，但是我找不到最新的解决方案。

Answer 1

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

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

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

使用React Router 4对组件内的网址进行更改？

1 个答案: