How to emulate Next.js app router constraints

Unlike probably most people here, I like next's directory-based routing model and hate remix's file-based routing mode, whether with flat-routes or not

Unfortunately I don't like the rest of Next, so I was wondering if there's any way to emulate its routing using tanstack router's router settings. Basically what I want is:

📁 src/routes/
├── 📄 page.tsx ('/' route file)
├── 📄 a.tsx (ignored)
├── 📄 __root.tsx (root route)
├── 📁 blog/
│   ├── 📄 layout.tsx ('/blog/*' route layout)
│   ├── 📄 page.tsx ('/blog/' route file)
│   ├── 📄 b.tsx (ignored)
│   └── 📁 $slug/
│       └── 📄 page.tsx ('/blog/$slug' route file)
└── 📁 about/
    └── 📄 page.tsx ('/about/' route file)
    └── 📁 components/
        └── 📄 c.tsx (ignored)

📁 src/routes/
├── 📄 page.tsx ('/' route file)
├── 📄 a.tsx (ignored)
├── 📄 __root.tsx (root route)
├── 📁 blog/
│   ├── 📄 layout.tsx ('/blog/*' route layout)
│   ├── 📄 page.tsx ('/blog/' route file)
│   ├── 📄 b.tsx (ignored)
│   └── 📁 $slug/
│       └── 📄 page.tsx ('/blog/$slug' route file)
└── 📁 about/
    └── 📄 page.tsx ('/about/' route file)
    └── 📁 components/
        └── 📄 c.tsx (ignored)

📁 src/routes/
├── 📄 page.tsx ('/' route file)
├── 📄 a.tsx (ignored)
├── 📄 __root.tsx (root route)
├── 📁 blog/
│   ├── 📄 layout.tsx ('/blog/*' route layout)
│   ├── 📄 page.tsx ('/blog/' route file)
│   ├── 📄 b.tsx (ignored)
│   └── 📁 $slug/
│       └── 📄 page.tsx ('/blog/$slug' route file)
└── 📁 about/
    └── 📄 page.tsx ('/about/' route file)
    └── 📁 components/
        └── 📄 c.tsx (ignored)

📁 src/routes/
├── 📄 page.tsx ('/' route file)
├── 📄 a.tsx (ignored)
├── 📄 __root.tsx (root route)
├── 📁 blog/
│   ├── 📄 layout.tsx ('/blog/*' route layout)
│   ├── 📄 page.tsx ('/blog/' route file)
│   ├── 📄 b.tsx (ignored)
│   └── 📁 $slug/
│       └── 📄 page.tsx ('/blog/$slug' route file)
└── 📁 about/
    └── 📄 page.tsx ('/about/' route file)
    └── 📁 components/
        └── 📄 c.tsx (ignored)

I tried this configuration, but it ignores directories with a name that fall into the pattern:

tanstackRouter({
    autoCodeSplitting: true,
    routeFileIgnorePrefix: '',
    routeFileIgnorePattern: '^(?!.*(?:page|layout|__root)\\.tsx$).*$',
    routeToken: 'layout',
    indexToken: 'page',
})

tanstackRouter({
    autoCodeSplitting: true,
    routeFileIgnorePrefix: '',
    routeFileIgnorePattern: '^(?!.*(?:page|layout|__root)\\.tsx$).*$',
    routeToken: 'layout',
    indexToken: 'page',
})

tanstackRouter({
    autoCodeSplitting: true,
    routeFileIgnorePrefix: '',
    routeFileIgnorePattern: '^(?!.*(?:page|layout|__root)\\.tsx$).*$',
    routeToken: 'layout',
    indexToken: 'page',
})

tanstackRouter({
    autoCodeSplitting: true,
    routeFileIgnorePrefix: '',
    routeFileIgnorePattern: '^(?!.*(?:page|layout|__root)\\.tsx$).*$',
    routeToken: 'layout',
    indexToken: 'page',
})

How to emulate Next.js app router constraints

Similar Threads

Similar Threads

Similar Threads