Add callback when active state of NavLink is changed

[saurabhdaware]

Feature Request

An onActiveChange callback on NavLink component

<NavLink onActiveChange={(isActive) => {}} />

Problem

So we are using NavLink for our component library component where consumers can pass ReactRouter from as prop

// consumer of our component library
<SideNavLink as={ReactRouter} />

Internally we set the as prop on our Link to turn our link into ReactRouter's NavLink

// internal code of component library
<Link as={props.as} />

Now this works perfectly for simpler navigation links as ReactRouter will automatically add aria-current attribute and active class.

But we also want maintain the isActive state internally in that react component so that we can do something like-

const [isCurrentItemActive, setIsCurrentItemActive] = React.useState(false)

<Box>
  <Link as={props.as} onActiveChange={(isActive) => setIsCurrentItemActive(isActive)} />
  {isCurrentItemActive ? /* open submenu or do something when this item is active */ : null}
</Box>

Currently there doesn't seem to be any way to achieve this (I know its possible with hooks like useRouteMatch or useLocation but since it's a component library component, we can't import anything from react-router-dom in it and the router is handled on consumer of library)

I know there was an issue opened earlier for similar callback - #6161. But it seems like they were trying to do something else so opening this issue with more context to library's usecase