How to use hybrid routes?

[khairulhaaziq]

Hi @kiliman thanks for the great work! I want to use the new hybrid routes and I am quite confues by the readme, I dont understand how I can use that, can you perhaps clarify?

[khairulhaaziq]

ok I got it, just use the convention straightaway. I guess what made it confusing is the folder names are different, so I thought I had to name them that way. another weird thing is the route works with both _route.tsx and route.tsx, index.tsx, with filenames straightaway. I really love how we can choose, but definitely something to improve for the readme. thanks so much for this! idk why remix isnt implementing this, the v2 route is simply unusable with crazy large number of routes

[kiliman]

Sorry, I was just about to reply. Yes, the README needs to be rewritten with more examples.

Basically, you can take your existing v2 routes, and if you want to organize them into folders, you can create a folder with the + suffix.

As for the route module, I tried to make it flexible. You can use index, layout, page, route, and anything starting with _. This way you can name it like _about, so you don't have a bunch of route.tsx files.

[khairulhaaziq]

Awesome! Love the flexibility! Im using flatfiles for my api and folders for my normal route to colocate the components and route based things. Thanks so much for this . Remix went from having the worst routing system to the best for me 😂

[oswaldoacauan]

@kiliman related question.

/routes/api/a/_route.ts
/routes/api/b+/z.ts
/routes/api/b+/x.ts

What is the expected routes for the structure above? In the latest version I dont think nested hybrid folders work as expected. I would expect the following routes:

/api/a
/api/b/z
/api/b/x

but instead the output is the following:

/api 
/api 
/api/a

'routes/api/b+/x': {
    path: 'api',
    index: undefined,
    caseSensitive: undefined,
    id: 'routes/api/b+/x',
    parentId: 'root',
    file: 'routes/api/b+/x.ts'
  },
  'routes/api/b+/z': {
    path: 'api',
    index: undefined,
    caseSensitive: undefined,
    id: 'routes/api/b+/z',
    parentId: 'root',
    file: 'routes/api/b+/z.ts'
  },
  'routes/api/a/_route': {
    path: 'a',
    index: undefined,
    caseSensitive: undefined,
    id: 'routes/api/a/_route',
    parentId: 'routes/api/b+/z',
    file: 'routes/api/a/_route.ts'
  },

If thats not a supported feature would be interesting to highlight in the readme.

[kiliman]

Yes, interior folders should always have the + suffix, otherwise, it treats the route as if you use colocated folder. So add the + suffix to the api folder, and it should work like you want.

I should probably return an error if you include an internal folder without the + suffix.

[oswaldoacauan]

@kiliman that would be helpful, we spent some time today figuring out why it was not working as expected. Updating the docs with an example of nested + and a heads-up would also be nice. @taheroo good first issue for you :D

[kiliman]

Yes, README needs a complete rewrite. Anyway, thanks for trying it out.