What's the difference between hybrid folder routes and the folder+ naming convention?

[brandonpittman]

The docs don't make this very clear.

[kiliman]

Yeah, sorry. I need to update the docs.

There are technically only two types:

• flat-files
• flat-folders

The route name uses . to separate the URL segments. So a.b.c is the same as /a/b/c.

With flat-files, your route is simply a filename (a.b.c.tsx). With flat-folders, the route is the folder name, and your route file is a file (a.b.c/_index.tsx). This allows you to colocate supporting files (a.b.c/component.tsx).

The problem with both is that the entire route had to be a single name. This made long routes cumbersome to use.

Hybrid routes simply allow you to break up your route names using / to create folders.

So instead of a.b.c/_index.tsx, you can have a top-level folder a and still use flat routes a/b.c/_index.tsx. You can still colocate files as needed since the route is still a folder.

The + suffix is the same thing, but for flat-files. Now instead of a.b.c.tsx, you can have a+/b.c.tsx. Since we're still using flat-files, there is no colocation. However, there is a special case for layouts. Typically you'd have a.tsx and a.b.tsx where a.tsx is the layout. You can now do a+/_layout.tsx which is equivalent to a.tsx. This allows you to keep both the layout and the child routes in the same folder.

Anyway, flat routes is smart enough to know whether you're using flat-files or flat-folders even in the same route tree.

Hope this clears things up.

[brandonpittman]

Yeah, that clears things up. Thanks!