This uses a routes folder to only define the routes, redirects, what data is loaded (useLoader). Other feature specific code would live in a components folder.
routes
├── _auth
│ ├── actions.tsx
│ ├── licenses.tsx
│ ├── login.tsx
│ ├── mfa.tsx
│ ├── password.tsx
│ ├── privacy-policy.tsx
│ ├── recover.tsx
│ └── terms-of-use.tsx
├── _auth.tsx # layout
└── _index.tsx
This still uses folder structures for each route, but lets it be organized by feature. Each folder would contain other files related to the route, like modals, utilities, etc.
routes
├── _auth
│ ├── actions
│ │ └── route.tsx
│ ├── layout.tsx // used for all routes in _auth
│ ├── login
│ │ ├── logo.tsx
│ │ ├── modal.tsx
│ │ ├── route.tsx
│ │ ├── some-component.tsx
│ │ └── types.ts
│ ├── password
│ │ └── route.tsx
│ ├── recover
│ │ └── route.tsx
└── _index.tsx
Note - I don't love this and probably wouldn't use it.
routes
├── _auth.actions.tsx
├── _auth.licenses.tsx
├── _auth.login.tsx
├── _auth.mfa.tsx
├── _auth.password.tsx
├── _auth.privacy-policy.tsx
├── _auth.recover.tsx
├── _auth.terms-of-use.tsx
├── _auth.tsx #layout
└── _index.tsx
If all of our URLs were this simple, I would be fine with either option 1 or 2. For a nested route like /users/:userId/posts/:postId/edit
, for example, what does that look like?