'react-router-dom v6 NavLink is always active

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 react-router-dom

Solution 1:^[1]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'react-router-dom v6 NavLink is always active

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]