reactjs - 禁用 navlink React 路由器

Question

我正在使用react router，我想在某种状态下禁用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>
}