T
TanStack•17mo ago
inland-turquoise

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,
])
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';
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
"" | "/" | "/$" | "/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?
2 Replies
inland-turquoise
inland-turquoiseOP•17mo ago
The reason HOME_PATH was interpolated into A_PATH was because the router said it needed the fully qualified path when creating the route. (I wasn't allowed to say /a, it hd to be /_home/a when createFileRoute Point is, I could absolutely rearrange this all to work, but is there some way to tell Navigate to go to a component that is part of a layout route without removing the layout routes?
fascinating-indigo
fascinating-indigo•17mo ago
Navigating to /_home/a wouldn't be possible since the /_home segment is a part of pathless/layout routes, so that doesn't get put into the URL. It'd be /a instead of /_home/a.

Did you find this page helpful?