'isActive style in react-router v.6

Could you please help me to understand why active style is all the time active? I've got "react-router-dom": "^6.1.1". I tried different variety of way to apply this stylies the way it's written in react router documentation, but still i can't find the mistake why it is so.

import { NavLink } from "react-router-dom";
import s from "../Sidebar/Sidebar.module.css";

function Sidebar() {
  return (
    <div className={s.Sidebar}>
      <NavLink
        to="/profile"
        style={(isActive) => ({ color: isActive ? "green" : "blue" })}
        className={s.navItems}
      >
        Profile
      </NavLink>
      <NavLink
        to="/messages"
        style={(isActive) => ({ color: isActive ? "green" : "blue" })}
        className={s.navItems}
      >
        Messages
      </NavLink>
      <br />
    </div>
  );
}

export default Sidebar;

.navItems{
  display: flex;
  text-decoration: none;
  font-size: 26px;
  padding-bottom: 8px;
}

  [1]: https://i.stack.imgur.com/cCsBw.png
react-routerazureasp.net-coremulti-factor-authentication


Solution 1:[1]

You can refer this page , for configuring Azure AD Multi-Factor Authentication settings. You can check out the verification methods available for the users and enable them in the azure portal. For more information you can refer this 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 SuryasriKamini-MT

Related Questions