reactjs - 禁用navlink react 路由器

我在使用React Router，并且我想在特定状态下禁用to属性。我传递了空字符串，但这并没有禁用链接，而是采用了页面的基本路由。我什至试图传递null，但这破坏了代码。甚至有可能这样做吗？

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

最佳答案

您可以尝试使用自定义点击处理程序禁用按钮。

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

关于reactjs - 禁用navlink react 路由器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49297357/