#Folder Route Structure

1 messages · Page 1 of 1 (latest)

frank cloud
#

Hey, I've got a minor question about routing. I'm doing the folder structure for routes and I'm trying to navigate from /thing to /thing/id. I have it setup in my route folders as a directory for thing and a directory for thing.$id, both are at the same level in /routes and both have a route.tsx file.

If I click on a link in my thing page, it keeps me on the current page but the URL updates. If I change my dynamic folder to anything else other than thing it works as expected.

Am I setting this route up incorrectly? I've been looking through the docs but they seem to suggest doing the dot syntax which I'd prefer not to do.

frank cloud
#

It looks like from the Conventional Route Folders docs, what I have should work: https://remix.run/docs/en/main/discussion/routes#conventional-route-folders.

My directory looks like this:

app/routes
├── _index.tsx
├── dashboard
│   └── route.tsx
├── login
│   ├── queries.ts
│   └── route.tsx
├── logout.ts
├── register
│   ├── queries.ts
│   └── route.tsx
├── thing.$id
│   └── route.tsx
└── thing
    └── route.tsx

Which looks the same as the docs example using concerts.

Remix
Route Configuration
round orbit
frank cloud
#

Thank you, adding the outlet does add the content, but I don't want to have the parent page when I go to the /id route. I guess I will need to do a conditional statement to render an outlet or the content

valid skiff
#

I think you need to rename thing/route.tsx to thing._index/route.tsx. Currently thing/route.tsx is being treated as the layout for any route under it.

worldly spindle
#

Yes, with Remix v2 routing, ALL routes are flat. Folders are ONLY for collocation, not for nested layouts.

If you want folders for nesting, checkout remix-flat-routes hybrid routes.

#

As @valid skiff said, yes thing is the treated as the parent layout for thing.$id so should have an <Outlet>. If you want to have a separate /thing route, then you should use thing._index which is the index route. If you don't want thing.$id to use thing as the parent layout, then add _ as suffix thing_.$id

frank cloud
#

That has worked, thank you!

I had to add the _ to the folder, so it is now thing._index/route.tsx and thing_.$id/route.tsx and it now works exactly how I was wanting it to.

worldly spindle
#

Yeah, I implemented the original flat routes spec written by Ryan. It takes some getting used to the rules, but once you do, it's pretty easy. Also the hybrid routes in remix-flat-routes helps you manage your route structure especially when you get into hundreds of routes and want to chunk it up into nested folders.

frank cloud
#

Yeah, I really like being able to have the folders, easier to keep everything cleaner and separated but it is a little different to follow how it works.

But now I know I can add the _ to the route it helps a lot, and I'll read up on the remix-flat-routes hybrid routes, thanks for that.

valid skiff
#

Glad you got it sorted

worldly spindle
#

Also remember, you don't need to do the whole thing/route.tsx colocated folder... you could just name it thing.tsx. And only create the folder if you want to colocate.

frank cloud
#

Yeah, I've seen that and might use it but I quite like the folders to keep everything separate and split functions etc. out

worldly spindle
#

The other thing that remix-flat-routes allows is extended route names... so instead of having a bunch of route.tsx files, thing/route.tsx can be thing/_thing.tsx (basically any file starting with leading _)

#

remix-flat-routes was the initial implementation of what is now the v2 routing convention. During development, I added additional features requested by user feedback, but Ryan only wanted to keep his original spec. So the package still exists and maintained. Kent C. Dodds also teaches hybrid routes in his Epic Web course and is included in his Epic Stack.

frank cloud
#

just trying that out, that's cool! I can see myself using a mixture of this and folders, it;s really cool