代码之家  ›  专栏  ›  技术社区  ›  Evanss

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

  •  0
  • Evanss  · 技术社区  · 6 年前

    我有一个组件可以在不同的URL上使用。这是我的应用程序的简化版本。js公司

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

    我传递状态道具,然后根据道具值进入组件设置状态。到目前为止,这是可行的,但我还需要组件内链接到其他状态的链接。当您在注册页面/状态上时,我有一个登录链接。当你在登录页面/状态时,我有一个要注册的链接。

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

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

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

    1 回复  |  直到 6 年前
        1
  •  0
  •   Evanss    6 年前

    我可以在SignUpAndRegister组件首次装载时以及每次收到新道具时(例如url更改时)设置其状态。

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