harsh-harlequin

Best Practice for Directory Structure For File-based?

I'm new to using Routing libraries of any kind, and I'd like to come up with a folder structure in my project that makes the most sense. I'm using file-based routing. My pages will have multiple components in them, of course, and I'd like to keep those components close to the actual page component I'm developing. Putting the Page component and its child components under the routes directory won't work well since Tanstack Router will create a route structure. This is what I'm working with now:

├── pages
│   └── initialVerification
│       └── InitialVerificationPage.tsx
├── routeTree.gen.ts
├── routes
│   ├── __root.tsx
│   ├── _compose.compose.initialVerification.tsx
│   ├── _compose.tsx
│   ├── about.lazy.tsx
│   └── index.tsx

├── pages
│   └── initialVerification
│       └── InitialVerificationPage.tsx
├── routeTree.gen.ts
├── routes
│   ├── __root.tsx
│   ├── _compose.compose.initialVerification.tsx
│   ├── _compose.tsx
│   ├── about.lazy.tsx
│   └── index.tsx

I'll have a pages directory that mirrors the routes directory. Is this overkill? Is there some better way to do this? What are most folks doing when it comes to organizing their project?

1 Reply

deep-jade•10mo ago

you can put your components into the routes directory. have a look at routeFileIgnorePrefix routeFileIgnorePattern https://tanstack.com/router/v1/docs/framework/react/guide/file-based-routing#options

TanStack | High Quality Open-Source Software for Web Developers

Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.

Gaming

Programming

Best Practice for Directory Structure For File-based?

Did you find this page helpful?