feat: expose isPathActive and useIsPathActive for custom NavLinks

[akx]

This PR extracts the path-matching part of NavLink to a pure function isPathActive and a hook useIsPathActive.

This will make it possible to easily create more custom <NavLink> analogues:

function RouterNavLink({to, children}) {
  const active = useIsPathActive(to);
  const navigate = useNavigate();
  return (
    <SomeCustomNavLink active={active} onClick={() => navigate(to)}>{children}</SomeCustomNavLink>
  );
}

I didn't add any new tests for the extracted behavior, since it's exactly the same code used by NavLink, and so is covered by NavLink's tests.

[remix-cla-bot]

Hi @akx,

Welcome, and thank you for contributing to React Router!

Before we consider your pull request, we ask that you sign our Contributor License Agreement (CLA). We require this only once.

You may review the CLA and sign it by adding your name to contributors.yml.

Once the CLA is signed, the CLA Signed label will be added to the pull request.

If you have already signed the CLA and received this response in error, or if you have any questions, please contact us at [email protected].

Thanks!

- The Remix team

[remix-cla-bot]

Thank you for signing the Contributor License Agreement. Let's get this merged! 🥳

[akx]

Rebased. Could someone review this? Cheers.

[brophdawg11]

There's an example in the docs to achieve this type of custom active link via useMatch/useResolvedPath, so I don't think we need to expose the internals of NavLink

[akx]

@brophdawg11 Alright, I guess, but why doesn't <NavLink> use useMatch then? Especially since' useMatch's docs say this...

react-router/packages/react-router/index.tsx

Lines 462 to 468 in 8601f27

	/**
	* Returns true if the URL for the given "to" value matches the current URL.
	* This is useful for components that need to know "active" state, e.g.
	* <NavLink>.
	*
	* @see https://reactrouter.com/docs/en/v6/api#usematch
	*/

[brophdawg11]

@akx Great question - maybe it should! From a quick test it seems to work, but I'll defer to @mjackson for any historical context

[WillSmithTE]

@brophdawg11 I wanted this functionality, and saw a few places linking here, but the docs link seems to have died. Any chance you have a new one, for future people's reference here too?

[brophdawg11]

Oops - yeah here's the link to the example in the repo: https://github.com/remix-run/react-router/tree/main/examples/custom-link