Route Conventions for a React Router App That Eventually Will be a Remix App

routes.mdx

Option 1 - Almost Conventional Route Folders

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

Option 2 - Organized by Feature

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

Option 3 - Conventional Route Config

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?