Link to(react-router-dom) 单击按钮时的条件渲染

Question

如果在文本框中输入用户，将转到用户页面，如果输入管理员，将转到管理页面。

这是我的代码。

constructor(props) {
    super(props);
    this.state = {
        userType : 0
    };
    this.handleLogin = this.handleLogin.bind(this);
}

如果 userType 为 0，则尝试转到用户页面，如果为 1，则尝试转到管理页面。

 handleLogin() {
    if(this.state.id==='admin'){
        this.setState({userType : 1});
    }
    else{
        this.setState({userType : 0});
    }
}

我在输入管理员时将 userType 更改为 1。我已经确认它在这次操作之前效果很好。

<Link to={this.state.userType === 0 ? '/userPage' : '/adminPage'}>
      <button className='loginButton' onClick={this.handleLogin}>Login</button>
</Link>

问题好像出在这部分。但我不知道如何解决它。请给我一个解决方案。

Answer 1

您不应同时使用 Link 和按钮。你可以简单地这样做：

<Link to={this.state.id==='admin' ? '/adminPage' : '/userPage'}>
      Login
</Link>

Answer 2

如果您想在 onClick 事件中将用户重定向到另一个页面，那么 histoty.push() 是正确的方法。此处应使用声明式路由。你可以这样实现-

    handleLogin() {
        if(this.state.id==='admin'){
            this.props.history.push("/adminPage");
        }
        else{
            this.props.history.push("/userPage");
        }
    }

<button className='loginButton' onClick={this.handleLogin}>Login</button>

Link to(react-router-dom) 单击按钮时的条件渲染

Link to(react-router-dom) conditional rendering when a button is clicked

javascript

reactjs

react-router-dom