Skip to content

Feature request: useCurrentRoute or useRouteName #3787

@stephenhandley

Description

@stephenhandley

Creating issue based on this conversation on the forums.

It would be helpful to be able to get the currently matched route via a hook for use in generic page analytics and also for additional route-based logic needed in some component used across multiple pages.

Here's an example of the analytics use case, where I want to use the name of the current route to identify the page so I can use it in a hook in my top level App component in order to make calls to segment’s analytics.page function generically rather than having to do so by hand on each individual page.

function usePageAnalytics() {
  const analytics = useAnalytics()
  const location = useLocation()

  // name would be the same as the `name` key in Routes.tsx
  const name = useRouteName();
  const params = useParams()
 
  // alternatively could have this return the currently matched route and associated properties such as name, params, pattern, etc.
  const { name, params } = useCurrentRoute();

  useEffect(() => {
    analytics.page({name, properties: { location , params }})
  }, [location])
}

Here's an example approach I've taken in the past to give example of the returned object shape in case that's useful
https://github.com/Hello10/groutcho/blob/master/packages/groutcho/src/MatchResult.js
https://github.com/Hello10/groutcho/blob/master/packages/groutcho/src/Route.js#L60-L107

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions