feat(remix-react): export react-router-dom's useMatch hook

[nicksrandall]

This is useful if you need to give a component some added functionality if a specific path is "active" or not.

[changeset-bot]

🦋 Changeset detected

Latest commit: ad9afdb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 18 packages

Name	Type
@remix-run/react	Patch
@remix-run/testing	Patch
create-remix	Patch
remix	Patch
@remix-run/architect	Patch
@remix-run/cloudflare	Patch
@remix-run/cloudflare-pages	Patch
@remix-run/cloudflare-workers	Patch
@remix-run/css-bundle	Patch
@remix-run/deno	Patch
@remix-run/dev	Patch
@remix-run/eslint-config	Patch
@remix-run/express	Patch
@remix-run/netlify	Patch
@remix-run/node	Patch
@remix-run/serve	Patch
@remix-run/server-runtime	Patch
@remix-run/vercel	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[remix-cla-bot]

Hi @nicksrandall,

Welcome, and thank you for contributing to Remix!

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 hello@remix.run.

Thanks!

- The Remix team

[remix-cla-bot]

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

[nicksrandall]

I'll note that I can import useMatch from react-router-dom` directly in my app but it's annoying to keep it up to date with exactly what remix depends on. If there is a version mis-match, my app breaks.

[chaance]

We probably want to wrap useMatch instead of exporting it directly to include more of the context from useMatches. As it stands, you'd get more info from wrapping useMatches yourself. I think a more consistent implementation looks something like this:

export function useMatch<
  ParamKey extends ParamParseKey<Path>,
  Path extends string
>(pattern: PathPattern<Path> | Path): PathMatch<ParamKey> | null {
  let matches = useMatches();
  let location = useLocation();
  return React.useMemo(() => {
    let match = matchPath(pattern, location.pathname); // from react-router
    let found = matches.find((m) => m.pathname === match?.pathname);
    if (!found || !match) return null;
    return {
      ...match,
      ...found,
    };
  }, [matches, pattern, location.pathname]);
}

[nicksrandall]

@chaance Would you accept this PR if it included the change you mentioned?

The big reason that I need this is that I don't want to depend on "react-router-dom" or "react-router" directly. I just want to be able to import from "@remix-run/react";

With the change above I still have to add a new dependency because matchPath also isn't in @remix-run/react

[chaance]

@chaance Would you accept this PR if it included the change you mentioned?

Hang tight on making those changes for now. Let me run this by the team and get some input to make sure it's something we want to expose (and that my implementation makes sense). I understand your concern, but there's no issue with doing what you're doing in the mean time as the React Router dependency isn't going away.

[brophdawg11]

I think this is fine to re-export directly since we don't want different. behavior for the same hook in RR versus Remix. Since RR has useMatches too - if we want to expand useMatch we can do that in RR and Remix will automatically inherit.

This also came up recently in Discord and we "probably just missed the re-export" per Ryan

[github-actions]

🤖 Hello there,

We just published version v0.0.0-nightly-0e2763f-20230503 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 1.16.1-pre.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!