react-router-dom v6 NavLink is always active

user_14912872 0
Viewed 4839

I followed Upgrading from v5 guide and I cannot get the NavLink component to work correctly.

https://reactrouter.com/docs/en/v6/upgrading/v5#upgrading-from-v5

v6 Navlinks:

    <NavLink
          className={(isActive) =>
            cx(isActive ? classes.linkActive : classes.link)
          }
          to="/seafarers"
          end
        >
          Seafarers
        </NavLink>
        <NavLink
          className={(isActive) =>
            cx(isActive ? classes.linkActive : classes.link)
          }
          end
          to="/"
        >
          Planning
        </NavLink>

Routes

    <BrowserRouter>
      <Routes>
        <Route path="/" element={<LoginScreen />} />
        <Route path="login" element={<LoginScreen />} />
        <Route path="forgot-password" element={<ForgotPasswordScreen />} />
        <Route path="seafarers" element={<SeafarersScreen />} />
      </Routes>
    </BrowserRouter>

Both "/" and "/seafarers" have active class

Note: NavLink elements are located in SeafarersScreen screen

How can I correct this issue?

react-router-dom react-router
3 Answers

Turns out I had to deconstruct the property of className as ternary operator always returned true for objects

    <NavLink
          className={({isActive}) => //(isActive) --> ({isActive})
            cx(isActive ? classes.linkActive : classes.link)
          }
          to="/seafarers"
          end
        >
          Seafarers
        </NavLink>
user_149128720

For react-router-dom v6

This example demonstrates how to make a custom <Link> component to render something different when the link is "active" using the useMatch() and useResolvedPath() hooks.

Official doc for active link

user_124827040 
<NavLink
  to="/"
  style={({ isActive }) => ({ color: isActive ? "green" : "blue" })}
  className={yourClasses}
>
  Profile
</NavLink>
user_91665290
Related