Layout Reset / Groups / Pathless Routes

[rmarscher]

Have you considered allowing nested pages or layouts with fs router to "reset" so they don't include the parent layouts? I try to avoid that and don't currently need it, but the use case can arise.

Other routers (SvelteKit, NextJS, Remix, Tanstack Router) have added groups or "pathless routes" to their fs routers as another way to solve similar use cases.

Or revisit #272 to keep Waku's router from sprawling into these advanced use cases?

[dai-shi]

I'm not sure how we call it, but I would like to introduce something like pathless components. With that in mind, #949 is already designed to be flexible to support it. So, the next step is to design the createPages API, after v0.22.0. cc @tylersayshi

I'm not sure about layout reset, but the same technique should be applied. You shouldn't use the parent layout if you ever want to reset it.

[tylersayshi]

Yeah, createLayout could acknowledge something like path: '/(group)' which would then allow us to solve for this.

There are probably other ideas for handling this with the api. This is the first that comes to mind though.

[rmarscher]

OK great. I agree that layout reset is not required if something like pathless components is available. Thank you :)

[dai-shi]

@tylersayshi
Re: #977 (reply in thread)

There are probably other ideas for handling this with the api. This is the first that comes to mind though.

Yes, I think there should be a new API. I'd also like to consider supporting siblings.

path: '/(group)'

I'm strictly against to this in createPages API. createPages API should be more explicit and in fs-router, it can be (group).tsx.

[tylersayshi]

ahh I see what you're looking for now. I agree both would be good and should be considered separately.

[dai-shi]

Hmm, in terms of "pathless" routes, I think two things are the same.

Group routes

./pages/_layout.tsx
./pages/foo.tsx
./pages/(group)/_layout.tsx
./pages/(group)/bar.tsx
./pages/(group)/baz.tsx

Static component in dynamic layout

./pages/_layout.tsx
./pages/foo/_layout.tsx
./pages/foo/(static).tsx
./pages/foo/(dynamic).tsx
./pages/foo/index.tsx

The question is how to order those components.

[rmarscher]

./pages/foo/_layout.tsx
./pages/foo/(static).tsx
./pages/foo/(dynamic).tsx
./pages/foo/index.tsx

This is interesting. Maybe the (name).tsx components could be passed as props to the layout and page render functions so they can decide where to place them in the component tree?

[dai-shi]

We've discussed internally and will solve these two requirements separately.
Here's the current idea:

Group routes

Use .../(group)/... convention.

./pages/_layout.tsx
./pages/foo.tsx
./pages/(somegroup)/_layout.tsx
./pages/(somegroup)/bar.tsx
./pages/(somegroup)/baz.tsx

Multiple components in a single page (Static component in dynamic layout)

Use .../${n}.tsx convention.

./pages/_layout.tsx
./pages/foo/_layout.tsx
./pages/foo/$0.tsx                    // can be static
./pages/foo/$1.tsx                    // can be dynamic
./pages/foo/$2.tsx

[dai-shi]

#1313 for the second one.

[dai-shi]

backlink: #1049

[rmarscher]

backlink: #561

[rmarscher]

I confirmed that this is now available in v0.21.21. Thanks @tylersayshi !!!

[dai-shi]

We plan to release the both features #977 (reply in thread) in v0.23.