continuing-cyan

nested routeFilePrefix

When using routeFilePrefix, and nesting ~index.tsx inside a route folder, instead of just appending '/' at the end of route it appends '/~index'. (example folder structure screenshot is below) Instead of the ~index.tsx inside ~dashboard being at /dashboard/ route, it's at /dashboard/~index.tsx.

19 Replies

continuing-cyanOP•2y ago

This is the routeTree.gen.ts file:

/* prettier-ignore-start */

/* eslint-disable */

// @ts-nocheck

// noinspection JSUnusedGlobalSymbols

// This file is auto-generated by TanStack Router

// Import Routes

import { Route as rootRoute } from './routes/~__root'
import { Route as DashboardImport } from './routes/~dashboard'
import { Route as IndexImport } from './routes/~index'
import { Route as DashboardindexImport } from './routes/~dashboard/~index'

// Create/Update Routes

const DashboardRoute = DashboardImport.update({
  path: '/dashboard',
  getParentRoute: () => rootRoute,
} as any)

const IndexRoute = IndexImport.update({
  path: '/',
  getParentRoute: () => rootRoute,
} as any)

const DashboardindexRoute = DashboardindexImport.update({
  path: '/~index',
  getParentRoute: () => DashboardRoute,
} as any)

// Populate the FileRoutesByPath interface

declare module '@tanstack/react-router' {
  interface FileRoutesByPath {
    '/': {
      preLoaderRoute: typeof IndexImport
      parentRoute: typeof rootRoute
    }
    '/dashboard': {
      preLoaderRoute: typeof DashboardImport
      parentRoute: typeof rootRoute
    }
    '/dashboard/~index': {
      preLoaderRoute: typeof DashboardindexImport
      parentRoute: typeof DashboardImport
    }
  }
}

// Create and export the route tree

export const routeTree = rootRoute.addChildren([
  IndexRoute,
  DashboardRoute.addChildren([DashboardindexRoute]),
])

/* prettier-ignore-end */

/* prettier-ignore-start */

/* eslint-disable */

// @ts-nocheck

// noinspection JSUnusedGlobalSymbols

// This file is auto-generated by TanStack Router

// Import Routes

import { Route as rootRoute } from './routes/~__root'
import { Route as DashboardImport } from './routes/~dashboard'
import { Route as IndexImport } from './routes/~index'
import { Route as DashboardindexImport } from './routes/~dashboard/~index'

// Create/Update Routes

const DashboardRoute = DashboardImport.update({
  path: '/dashboard',
  getParentRoute: () => rootRoute,
} as any)

const IndexRoute = IndexImport.update({
  path: '/',
  getParentRoute: () => rootRoute,
} as any)

const DashboardindexRoute = DashboardindexImport.update({
  path: '/~index',
  getParentRoute: () => DashboardRoute,
} as any)

// Populate the FileRoutesByPath interface

declare module '@tanstack/react-router' {
  interface FileRoutesByPath {
    '/': {
      preLoaderRoute: typeof IndexImport
      parentRoute: typeof rootRoute
    }
    '/dashboard': {
      preLoaderRoute: typeof DashboardImport
      parentRoute: typeof rootRoute
    }
    '/dashboard/~index': {
      preLoaderRoute: typeof DashboardindexImport
      parentRoute: typeof DashboardImport
    }
  }
}

// Create and export the route tree

export const routeTree = rootRoute.addChildren([
  IndexRoute,
  DashboardRoute.addChildren([DashboardindexRoute]),
])

/* prettier-ignore-end */

stormy-gold•2y ago

please update to the latest version I just fixed this at least I hope 😄

continuing-cyanOP•2y ago

i am using 1.16.2 which seems to be the latest version

stormy-gold•2y ago

https://github.com/TanStack/router/releases/tag/v1.16.2

GitHub

Release v1.16.2 · TanStack/router

Version 1.16.2 - 2/14/2024, 4:51 PM Changes Fix do not include routeFilePrefix in path (ff8d092) by Manuel Schiller useMatchRoute now also works with basepath (3d9fe83) by Manuel Schiller Docs A...

stormy-gold•2y ago

hmm

continuing-cyanOP•2y ago

4h ago update

stormy-gold•2y ago

well then there seems to be another issue then with this

continuing-cyanOP•2y ago

probably If I try to edit the route here from ~index to /:

export const Route = createFileRoute("/dashboard/~index")({
  component: DashboardIndexComponent,
});

export const Route = createFileRoute("/dashboard/~index")({
  component: DashboardIndexComponent,
});

it gets automatically reverted back to ~index when starting the dev server if it helps, it works fine if I use the routeFileIgnorePrefix approach

stormy-gold•2y ago

do you know if this worked before? just to know if this was a regression

continuing-cyanOP•2y ago

no, sorry, I just installed tanstack router today and started playing with it 😦 I can revert the version if you want

stormy-gold•2y ago

ok no worries

continuing-cyanOP•2y ago

👍 ok it did seem you fixed a part of it, when i reverted to 1.16.0 the '~' was even in dashboard, so i had /~dashboard/~index @Manuel Schiller

stormy-gold•2y ago

ok i have a fix for this

stormy-gold•2y ago

https://github.com/TanStack/router/releases/tag/v1.16.3

GitHub

Release v1.16.3 · TanStack/router

Version 1.16.3 - 2/14/2024, 8:56 PM Changes Fix generator removes all routeFilePrefix occurences in the route path (1031b5a) by Manuel Schiller Packages @tanstack/router-generator@1.16.3 @tansta...

continuing-cyanOP•2y ago

did you publish it to npm registry as well?

stormy-gold•2y ago

sure https://www.npmjs.com/package/@tanstack/router-cli/v/1.16.3

npm

@tanstack/router-cli

Latest version: 1.16.3, last published: 13 minutes ago. Start using @tanstack/router-cli in your project by running npm i @tanstack/router-cli. There is 1 other project in the npm registry using @tanstack/router-cli.

continuing-cyanOP•2y ago

ah my bad, I was watching for react-router package, not router-vite-plugin thanks, its fixed now after updating it!

fair-rose•2y ago

whoops! that original prefix PR was mine and just realized i used the "ignoreFilePrefix" instead of "routeFilePrefix" - I had made some local edits to my node_modules in testing with the correct prefix so didn't even realize... glad it got sorted quickly though!

stormy-gold•2y ago

Gaming

Programming

nested routeFilePrefix

Did you find this page helpful?