navigation Link still remains active on change react-router-dom

0
votes

I have two navigation buttons that utilize the tag of react-router-dom. The problem I am facing is when I shift from the first button to the second button, the first button still remains active.

In my situation, I have a runs button and input button The runs button is in active state, but when the input button is clicked, the run button is still active

Here is my snippet showing the navigation tabs : import { NavLink } from "react-router-dom";

<div className = "navigation-tabs">

      <NavLink to={`/tasks/${task}`} activeStyle={{ backgroundColor: '#0022ff', color: '#FFF' }}>
        Runs
      </NavLink>
      <NavLink to={`/tasks/${task}/input`} activeStyle={{ backgroundColor: '#0022ff', color: '#FFF' }}>
        Input
      </NavLink>

</div>
2
reactjsreact-router-dom

2 Answers

1
votes

React router dom will treat /tasks/${task} and /tasks/${task}/input as the same path. To change this, add exact as an attribute to your navlink tags as follows:

<div className = "navigation-tabs">

      <NavLink exact to={`/tasks/${task}`} activeStyle={{ backgroundColor: '#0022ff', color: '#FFF' }}>
        Runs
      </NavLink>
      <NavLink to={`/tasks/${task}/input`} activeStyle={{ backgroundColor: '#0022ff', color: '#FFF' }}>
        Input
      </NavLink>

</div>
1
votes

Maybe exact property can fix this. Because your URL like "/task/5" and "/task/5/input", in this case, router check the first part of URL so this two URL starts with "/tasks/5" and this why your link always active

<NavLink to={`/tasks/${task}`} exact activeStyle={{ backgroundColor: '#0022ff', color: '#FFF' }}>
    Runs
  </NavLink>