TanStackT
TanStack•2y ago•
2 replies
sacred-rose

Using <Navigate to={} /> with Layout routes?

I recently switched to file based routing and i'm having some issues using the Navigate component with _layout routes

my tree looks like this (copied from gen, names changed)

declare module '@tanstack/react-router' {
  interface FileRoutesByPath {
    '/': {
      preLoaderRoute: typeof IndexImport
      parentRoute: typeof rootRoute
    }
    '/$': {
      preLoaderRoute: typeof SplatImport
      parentRoute: typeof rootRoute
    }
    '/_home': {
      preLoaderRoute: typeof HomeImport
      parentRoute: typeof rootRoute
    }
    '/other': {
      preLoaderRoute: typeof ScanImport
      parentRoute: typeof rootRoute
    }
    '/_home/b': {
      preLoaderRoute: typeof HomeBImport
      parentRoute: typeof HomeImport
    }
    '/_home/a': {
      preLoaderRoute: typeof HomeAImport
      parentRoute: typeof HomeImport
    }
    '/_home/c': {
      preLoaderRoute: typeof HomeCImport
      parentRoute: typeof HomeImport
    }
  }
}


export const routeTree = rootRoute.addChildren([
  IndexRoute,
  SplatRoute,
  HomeRoute.addChildren([
    HomeARoute,
    HomeBRoute,
    HomeCRoute,
  ]),
  OtherRoute,
])


To avoid raw strings, I've externalized my routes to a file like this: 

export const BASE_PATH = '/base';

export const HOME_PATH = '/_home';

export const A_PATH = `${HOME_PATH}/a`;

export const B_PATH = `${HOME_PATH}/b`;

export const C_PATH = `${HOME_PATH}/c`;

export type HomeRoute = typeof A_PATH | typeof B_PATH | typeof C_PATH

export const OTHER_PATH= '/other';


But, if I try to Navigate to one of the routes I get this error:


Type "/_home/a" is not assignable to type

"" | "/" | "/$" | "/other" | "$" | "/b" | "b" | "/a" | "a" | "/c" | "c" | "other" | "./" | "../" | undefined


I know I could take A_PATH.replace(HOME_PATH, '') and it'd work, but it seems odd the router "can't figure this out". Am I missing something?
Was this page helpful?