單擊按鈕時鏈接到（react-router-dom）條件渲染

Question

如果在文本框中輸入user，將go轉到用戶頁面，如果輸入admin，將go轉到管理頁面。

這是我的代碼。

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

如果userType為 0，它會嘗試 go 到用戶頁面，如果它是 1，它會嘗試 go 到管理頁面。

 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 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>