Best practice for type-safe redirects

[GarrisonBates]

Hello,

I'm currently transitioning from React Router and have functionality that looks something like this:

const location = useLocation()
if (!authenticated) return <Navigate to='/login' state={{ from: location.pathname }} />

This worked fine, but now with Tanstack Router I'd like to make it type safe. I was thinking there'd be an exported type that would cover all possible URL paths, but this is the best I could come up with:

import { FileRoutesByFullPath, routeTree } from '@frontend/routeTree.gen'

declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router
  }
  interface HistoryState {
    from?: keyof FileRoutesByFullPath
  }
}

And then do something like this:

const routerState = useRouterState({
    select: (s) => s.matches.at(-1),
  })

 if (!account)
    throw redirect({
      to: '/login',
      state: { from: routerState?.fullPath, token },
    })

But even then, I get type error because routerState.fullPath can be "", which isn't included in the HistoryState type derived from FileRoutesByFullPath. Also, I feel like there's got to be a better way than useRouterState to get the current path? I'm still familiarizing myself with Tanstack Router's APIs, so if there's an obvious drop-in for this use case I'd appreciate some input.

[schiller-manuel]

where do you want to throw that redirect? what do you want to do with the from value? if you use the typed values, this would contain path params in their $ form, not the interpolated path.
probably best if you can provide a complete example, e.g. by forking one of the existing router examples on stackblitz

[GarrisonBates]

Sorry, I realized after the fact that (to my understanding) you're not
supposed to throw a redirect in a component, only in beforeLoad. Correct me
if I'm wrong about this.

So actually it should just use (since this is just in the React
component). But the main question is just, what's the best way to get valid
url paths as a type? And then is there a type safe alternative to
location.pathname that I can use to get the current location, but have its
typed narrowed to valid url paths rather than string?

Thanks, if that still doesn't make sense let me know and I can make a repro.

Edit: I've been reading through the docs and found ValidateLinkOptions, which is the type I was looking for. Now I can do this:

declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router
  }
  interface HistoryState {
    // @TODO: Strong typing using actual routes
    from?: ValidateLinkOptions<RegisteredRouter>['to']
    // from?: keyof FileRoutesByFullPath
    token?: string
  }
}

And from is typed correctly. So now I only have the one problem, getting the current location with types narrowed to valid paths, rather than being typed as string like location.pathname. I figure this is likely to be built into Tanstack Router, but I haven't found it yet.