TanStackT
TanStack•2d ago•
19 replies
technological-jade

Accessing Route.fullPath from outside the route file (for relative navigation in other components)

I have a layout route with a sidenav that has links to child routes. When the component lives in the route file, I can use Route.fullPath with relative to and everything works great:

// routes/_protected/reviews/$reviewId/route.tsx
export const Route = createFileRoute("/_protected/reviews/$reviewId")({
  component: ReviewLayout,
});

function ReviewLayout() {
  return (
    <>
      <Sidenav />
      <Outlet />
    </>
  );
}

function Sidenav() {
  // This works perfectly - no need to pass params, they're inferred
  return (
    <Link from={Route.fullPath} to="overview">Overview</Link>
    <Link from={Route.fullPath} to="analytics">Analytics</Link>
    <Link from={Route.fullPath} to="settings">Settings</Link>
  );
}


This is great because:
- I don't need to repeat params={{ reviewId }} on every link
- It's type-safe
- Relative navigation works correctly from any child route (e.g., clicking from /reviews/123/overview/details correctly goes to /reviews/123/analytics, not /reviews/123/overview/details/analytics)

The problem: I want to extract Sidenav to its own file for code organization. When I use getRouteApi, I lose access to fullPath:

// components/ReviewSidenav.tsx
const route = getRouteApi("/_protected/reviews/$reviewId");

function Sidenav() {
  const params = route.useParams(); // ✅ works
  
  // ❌ route.fullPath doesn't exist on RouteApi
  return (
    <Link from={route.fullPath} to="overview">Overview</Link>
  );
}


Current workarounds (not ideal):

1. Hardcode the path string: from="/reviews/$reviewId" — loses type safety, have to manually strip pathless groups like _protected
2. Export from route file: export const fullPath = Route.fullPath — works but feels redundant

What I'm hoping exists:
- A way to get fullPath from getRouteApi(), or
- Some other pattern for type-safe relative navigation from extracted components

Is there a recommended approach for this?
Was this page helpful?