flat-fuchsia

Hi!

I am trying out file based routing and trying to create a route tree. My folder structure is attached. The problem is - all routes, even the ones in sub-folders are added as 'root routes':

const ProUsersIndexRoute = ProUsersIndexImport.update({
  id: '/pro/users/',
  path: '/pro/users/',
  getParentRoute: () => rootRoute,
} as any)

const ProUsersIndexRoute = ProUsersIndexImport.update({
  id: '/pro/users/',
  path: '/pro/users/',
  getParentRoute: () => rootRoute,
} as any)

any ideas why?

3 Replies

extended-salmon•11mo ago

Check your File Naming Convention

routes/
  _index.tsx      (for root route)
  pro/
    _index.tsx    (for /pro route)
    users/
      _index.tsx  (for /pro/users route)

routes/
  _index.tsx      (for root route)
  pro/
    _index.tsx    (for /pro route)
    users/
      _index.tsx  (for /pro/users route)

And Update your Route File Generation Config

import { createFileRoute, createRouteTree } from '@tanstack/react-router'

// Generate the route tree
export const routeTree = createRouteTree({
  routesDir: './routes',
  generatedDir: './routes/__generated__',
  // Make sure defineRoute is set to true
  defineRoute: true,
})

import { createFileRoute, createRouteTree } from '@tanstack/react-router'

// Generate the route tree
export const routeTree = createRouteTree({
  routesDir: './routes',
  generatedDir: './routes/__generated__',
  // Make sure defineRoute is set to true
  defineRoute: true,
})

flat-fuchsiaOP•11mo ago

Hey @dmitropski ! I am using vite + TanStackRouterVite with default options. Not sure where 'defineRoute' goes since I don't have createRouteTree anywhere. And if I rename files from index.tsx to _index.tsx, the path in createFileRoute("/") changes to createFileRoute("/_index") so I don't think that's the right naming Ah. When I use flat naming "pro.tsx" and "pro.users.tsx" it works fine thanks anyways 🙂

extended-salmon•11mo ago

oh, okay are u developing big project?

Gaming

Programming

Hi!

Did you find this page helpful?