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])
}
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.pagefunction generically rather than having to do so by hand on each individual page.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