如果React.JS链接标记的所有验证都正确，则渲染下一个组件

Posted 2021-04-18

我点击了一个按钮，我转到下一页，即

<Link to="/results"><button>Calculate</button></Link>

但我想进入下一页，只有少数验证或标志showResults为真。而且，我也不想隐藏按钮。按钮应该在那里，但只有在验证正确的情况下它才能进入下一页。

答案

我假设您要更新链接的路径。

你可以这样做：

render(){
    const toLink = condition ? '/' : '/results'
    return(
        <Link to={toLink}><button>Calculate</button></Link>
    )

}

另一答案

你可以添加preventDefault（）

render(){
    return(
        <Link to={toLink} onClick={(e) => {if (!showResults) {e.preventDefault();}}}>
            <button>Calculate</button>
        </Link>
    )

}