Nested folders and nested / non-nested routes

[vahidvdn]

For large-scale applications, this is crucial. For example, I need such a thing:

routes

• auth
  • login
  • signup

Any way to achieve this in routing? I could not find anything regarding this in the docs related to the routing

Btw, I tried this but it didn't work:

routes
└── auth
    ├── route.tsx
    └── login
        ├── route.ts

I need to achieve either auth/login or login itself. Either of them is fine.

[sergiodxa]

Nesting folders in routes was possible in v1, but since v2 the convention is flat routes so it's not possible.

But you can do it with remix.config.js routes function, and there are popular packages like remix-flat-routes which supports folder+ convention to group routes.

[luanmm]

The route conventions are one of the few things that IMHO Next (with app dir) did "right(er)" than Remix. In my projects, the way the routes are defined cause confusion, because they aren't so "natural" to think of and, when the project is bigger than a website, directories are needed to a good organization.

The patterns are too specific and aren't so easy to think of - it feels that you always need documentation because you could be missing a detail. In this sense, Next has patterns that feels a little bit more "natural" to use (the main one is allowing multiple nested directories, which is something closely related to the way any file system or http server works to mount the URL based on a tree hierarchy). The only horrible pattern that Next has is for parallel routing, because it doesn't feel natural at all - it just seems "wrong" somehow.

Depending on another packages or manual assingment does not seems to be a great way to do it, because routing is the first feature that a web framework should be responsible for, I think. Hope maintainers could reconsider it at some point, because Remix is a great framework for React ecosystem - and IMHO has the perspective to be the best one by far.

[sergiodxa]

routing is the first feature that a web framework should be responsible for

Remix approach is that while routing is a feature, the file convention is just that, a convention, Remix routing is actually React Router and that uses code to define it, that's why while Remix provides a built-in convention it has a escape hatch to add more routes not following or even change it completely.

This is done this way because everyone has their own opinions on how to organize them, the v1 convention is more similar to what Next did later with App Router, the change to v2 being flat is to use a simpler convention that works good enough for small and medium projects and can be customized for large projects with custom needs or for more opinionated teams.

It should be possible to even replicate App Router convention if desired.

[tombohub]

@sergiodxa can we define routes like in react router: https://reactrouter.com/en/main/routers/create-browser-router or manual vite config is the only one: https://remix.run/docs/en/main/discussion/routes#manual-route-configuration ?

[sergiodxa]

The way described in the Remix docs is the only way

[vahidvdn]

@sergiodxa Thank you. How about nesting layout between folders?

For example, I have this structure without folders

routes
└── _dashboard.tsx
└── _dashboard.tickets.tsx
└── _dashboard.favorites.tsx

Now we have tickets and favorites as routes, meanwhile dashboard is not a route (since I wanted to have a fixed side bar and header menu as a parent layout).

Can I have such a relation between folders? Because the dashboard may have multiple files (small components) and also tickets and favorites may have their own files, I want to organize them. Any idea?

[kiliman]

With remix-flat-routes hybrid convention, it would look like this:

routes/
└── _dashboard+
    ├── _layout.tsx    -> same as _dashboard.tsx
    ├── favorites.tsx
    └── tickets.tsx

[kiliman]

If you want to use colocation, you can still do it.

routes/
└── _dashboard+
    ├── _layout.tsx
    ├── favorites           -> no +, so colocated
    │   ├── component.tsx   -> a colocated component file
    │   ├── route.tsx       -> route module, same as favorites.tsx
    │   └── styles.css
    └── tickets.tsx

[aadamsx]

I'm confused, is there a doc that goes over all of this, the underscores, the plus signs, the naming conventions, using remix-flat-routes, etc -- I need 100% understand of all this as I'm new to Remix.

[sergiodxa]

@aadamsx https://remix.run/docs/en/main/file-conventions/routes

[kiliman]

@aadamsx The + and nested folders is an extension to the Remix file convention (via remix-flat-routes). I think it would help if you first familiarize yourself with the default convention linked above.

If you have specific questions, it would be helpful to list the URLs in your app that you'd like to use and make any notes about specific layouts. Then we can show you the route filenames.

[jonschlinkert]

Is Remix only intended for very small sites or personal blogs? I love Remix in general, but honestly the change to use flat routes has made Remix much more difficult to use. I'm surprised more people aren't speaking up about this. The change to flat routes has made Remix cumbersome to use for anything with more than a few routes, as there is no longer a direct correlation between the routes and what's generated. Everything is very abstract. I'm imagining what personal computers would be like today had one of the early dev leads removed folders.

[alexanderson1993]

People don't speak up about it because routes are totally configurable. https://remix.run/docs/en/main/file-conventions/vite-config#routes

You can even go back to the v1 route convention. https://github.com/remix-run/v1-compat-utils/blob/main/packages/v1-route-convention/README.md

[jonschlinkert]

Yikes, I guess I see why people don't speak up about it.

[nikodunk]

FWIW, at the mid-size https://joinatmos.com we have 81 unique pages in our fintech app and it's still readable, though intense initially.

Won't scale forever, but if we grow beyond it we'll simply go back to sorting our pages into folders any old way, and having a single file that links to all of them, like we did on React Router before it.

[brettgoulder]

At one point on Twitter, @ryanflorence mentioned "All file based routing drives me nuts, wish we never added it at all. I use the manual config version." and that "we've got way better stuff coming too. File routes are bogus."

Are there any official RFCs or anything about what this better routing is?

[luanmm]

It would be nice to have something like a RFC or a "plan for the future" regarding routing.

File-based routing seems the more natural way of doing things, IMHO. Paths in URIs/URLs are hierachical structures... so is the filesystem. For me, manual routing "drives me nuts", because when I need to organize or move something to another place, I always have to change in two places - and if I already have a semantic way of organize my project, this seems to be just a dumb task.

For me, at least, this seems to be something that frameworks like Remix "revolutionized" the way of thinking the project's structure (abstracting things into concepts that feels natural to users/developers). Now, "rolling back" this feature, seems that Remix is just going backwards (in my point of view, of course).

Even being flexible somehow and letting people have its own routing strategy, why not having something "natural" as a default? Or a configuration like "manual" true/false. IDK... for me this was disappointing, being sincere here.