禁用navlink反应路由器

Question

我正在使用react路由器,我想在某种状态下禁用to属性.我传递了空字符串,但这并没有禁用链接,而是占用了页面的基本路径.我甚至试图传递null但是这会破坏代码.甚至可以这样做吗？

<NavLink className="nav-link" to={this.state.role == 4 ? "/pages" : ""}></NavLink>

Answer 1

您可以尝试使用自定义单击处理程序禁用该按钮.

handleClick = (e) => {
    const { linkDisabled } = this.state
    if(linkDisabled) e.preventDefault()
}

render() {
    return (
        <NavLink 
            onClick={this.handleClick} 
            className="nav-link" 
            to="/pages"
        >
            ...
        </NavLink>
    )   
}

您可能希望在禁用按钮时添加一些css

或者你可以根本不显示按钮

{
    this.state.linkDisabled ? 
        null :
        <NavLink className="nav-link" to="/pages"></NavLink>
}