usePathMatch

[Tobbe]

Finally have a solution to matching route paths

This PR and #9755 together provides a solution for the use case outlined in #7469

Here's the example from #7469 as it could be solved with the code in this PR

const Navbar () => {
  const { project } = useParams()
  const routePaths = useRoutePaths()

  const modes = [
    {
      name: "Info",
      route: routes.info({ project }),
      match: usePathMatch(routePaths.info), // using the new hook together with routePaths
    },
    {
      name: "Compare",
      route: routes.compare({ project, id: "1" }),
      match: usePathMatch(useRoutePath('compare')), // alternative to the above
    },
    // ...
  ]

  return (
    <>
      {modes.map((x) => <Button as={Link} to={x.route} isActive={x.match} />)}
    </>
  )
}

TODO:

• More tests
• Docs
• Discuss with @jtoar
• Better types
• Make it possible to pass the same options as for useMatch

[Tobbe]

routeParams instead

[jtoar]

Paired with @Tobbe on this; some notes I added:

• change useRoutePath() behavior when passed no args to output the current Route's path
• see if we can fold this functionality into useMatch given a new routeParams option

[dennemark]

Hi @Tobbe ,
I like the approach, after reading about the useRoutePath(s) hooks that are documented already in another commit.
While it is not as verbose as the other linked approch, where you can set dynamic and static parameters, this approch is much nicer to maintain!
Seems great!

[Tobbe]

@dennemark even with this solution (the new usePathMatch hook) you can set both static and dynamic parameters

Here's one of the examples from the comments on #7469

<Route path="/{dynamic}/{path}" page={ExamplePage} name="example" />

routes.example({ dynamic: 'dog', path: Param.ANY })
// => '/dog/{path}'

routes.example({ dynamic: Param.ANY, path: Param.ANY })
// => '/{dynamic}/{path}'

With this new hook you'd instead do this:

<Route path="/{dynamic}/{path}" page={ExamplePage} name="example" />

const exampleRoutePath = useRoutePath('example')
// => '/{dynamic}/{path}'

const matchOnlyDog = usePathMatch(exampleRoutePath, { routeParams: { dynamic: 'dog' }})
const matchFullyDynamic = usePathMatch(exampleRoutePath)

In the above example, if the current page url was https://example.org/dog/fido then both matchOnlyDog and matchFullyDynamic would have match: true.
If the current page instead was https://example.org/cat/garfield then only matchFullyDynamic would match

[Tobbe]

Closing this one in favor of #9793