Get current path in a reactive manner?

[mrlubos]

With react-router, I can use location to send data to analytics

import { Outlet, useLocation } from 'react-router-dom';

function RouteWrapper() {
  const location = useLocation();

  return (
    <>
      <Analytics pathname={location.pathname} />
      <Outlet />
    </>
  );
}

How can I achieve the same with this package?

import { Outlet, RootRoute } from '@tanstack/react-router'

function RouteWrapper() {
  const location = null // ???

  return (
    <>
      <Analytics pathname={location.pathname} />
      <Outlet />
    </>
  )
}

export const Route = new RootRoute({
  component: RouteWrapper,
})

[borstessi]

@mrlubos

i think i found the solution.

you can use the useRouterState Hook:

const router = useRouterState();

  console.log("here", router.location.pathname);

it is reactive and will change on navigation

[Emmanuel-Xs]

what about a from path i.e a path from where we got to the current path

[mrlubos]

Just want to update here, TanStack router now has useLocation() hook too.

[Emmanuel-Xs]

Nice, thanks

[Akronae]

wait, but those paths aren't type safe 😕