javascripthtmlreactjsnode.jsangular

NavLink in React JS not working as expected?

So, I am working with ReactJS. In the Sidebar I used react-router NavLink component, 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>