javascripthtmlreactjsnode.jsangular

NavLink in React JS not working as expected?

So, I am working with ReactJS. In Sidebar ) used NavLink but when i am working with nested routes it is not working as expected.

<li>
     <NavLink
            role="button"
            to="/organization/"
            className="flex flex-row justify-start gap-2 items-center"
          >
            <MdDashboard /> Dashboard
          </NavLink>
        </li>
        <li>
          <NavLink
            role="button"
            to="/organization/customization"
            className="flex flex-row justify-start gap-2 items-center"
          >
            <MdOutlineDeveloperMode /> Customization
          </NavLink>
        </li>

Nested Route = http://localhost:3000/organization/customization

It added active class to both /organization & /organization/customization

enter image description here

I Wanted to make sure nested routes works with NavLink.

Solution

  • So, you need to add "end" attribute like:

    <NavLink
  end
  role="button"
  to="/organization/"
  className="flex flex-row justify-start gap-2 items-center"
>
  <MdDashboard /> Dashboard
</NavLink>