Access current active route object

[mammadataei]

I need to watch for route changes and access the currently active route object. I've found the following to watch for location updates:

const router = useRouter()

useEffect(() => {
  console.log(router.state.location)
}, [router.state.location])

I'm not sure if it's the right way to do so, and besides, I need the route object, so I should search the routes object which is quite expensive. Is there any better solution?

And I think the documentation needs lots of improvements, most of the API and use cases are not covered yet.

[reintroducing]

you can use the (for some reason undocumented) useLocation hook to access the current route.

[Sawtaytoes]

That hook no longer exists. That's probably why it wasn't documented :P.

I'm also wanting an answer to this question. How do you grab the current route?

[sarojregmi200]

I am also searching for a way to grab the currently active route,
I can use the window location api to get the entire path and then get the active path but having a default trackable way would be great.

[ParasSolanki]

For the current active route state you have to use useRouterState (not documented yet).

router/packages/react-router/src/useRouterState.tsx

Line 6 in a542861

export function useRouterState<

// ./src/routes/activity.lazy.tsx
import { createLazyFileRoute, useRouterState } from "@tanstack/react-router";

export const Route = createLazyFileRoute("/activity")({
  component: ActivityPage,
});


function ActivityPage() {
  const state = useRouterState();
}

[SeanCassiere]

I'd recommend using a more fine-grained selector to reduce the number of component re-renders.

const location = useRouterState({ select: (s) => s.location })

[ParasSolanki]

Yeah, selector api is great.