disabling navlink react router

Question

I am using react router in and I want to disable the to attribute in a certain state. I passed empty string, but that doesn't disable the link instead it takes to the base route of the page. I even tried to pass null but that breaks the code. Is it even possible to do so?

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

Answer 1

You could try disabling the button with a custom click handler.

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

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

You might want to add some css for when the button is disabled

Alternatively you could just not show the button at all

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