In React Router Version 5 I had a NavLink which looked the following:
<NavLink
to="/notes"
exact={true}
className="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium"
activeClassName="bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium"
>
Home
</NavLink>
It recognized both localhost:3000/notes and localhost:3000/notes/ with a trailing slash as active urls.
In React Router Version 6 I refactored it to the following:
<NavLink
to="/notes" end
className={(navData) =>
navData.isActive
? "bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium"
: "border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium"
}
>
Home
</NavLink>
This recognizes only localhost:3000/notes as active url.
Is there a way in v6 to have also the version with trailing slash recognized as an active url?