feat: Pathless Layout Routes

[locchuong]

Pathless Layouts are quite useful when implementing an Auth / Private Layer to specific routes without prefixing routes with, say, "/auth". This feature comes with Remix through prefixing directories with a double-underscore, although I'm aware that that may be confusing since single-underscoring ignores directories/files. Any thoughts about adding this?

Remix Documentation: https://remix.run/docs/en/v1/guides/routing#pathless-layout-routes

Thanks in advance! It's been a pleasure using your library :)

[locchuong]

After tinkering with the code, I was able to find a solution to Pathless Layout Routes that suited my needs.

Update the patterns array to include a pathless field

const patterns = {`
  route: [/\/src\/pages\/|\.(jsx|tsx)$/g, ""],
  splat: [/\[\.{3}.+\]/, "*"],
  param: [/\[([^\]]+)\]/g, ":$1"],
  pathless: [/~\//g, "/"],
  slash: [/index|\./g, "/"],
} as const;

---

Update segments in generateRegularRoutes to...
Need to remove .filter(Boolean) from segments in order for this to work... as we want empty strings to still be a valid path.

    const segments = key
      .replace(...patterns.route)
      .replace(...patterns.splat)
      .replace(...patterns.param)
      .replace(...patterns.pathless)
      .split("/");

---

Essentially, I'm assigning every "~" directory the value of empty string for it's path.

An example folder structure may look like...

   \pages
        \index.tsx
        \_app.tsx
        \~
           \_layout.tsx
           \Dashboard.tsx
           \Customers.tsx

Where the generated routes would be

• app.com/ (Wrapped by _app.tsx)
• app.com/dashboard (Wrapped by _app.tsx and _layout.tsx)
• app.com/customers (Wrapped by _app.tsx, and _layout.tsx)

Any feedback on if this is viable? Or, am I missing an edge-case now that I've removed the Boolean filter.

[oedotme]

Hey @locchuong, I'm very glad to hear that!

I think omitting the empty strings filtering will introduce issues as not all empty strings are necessarily a pathless layout.

The other issue would be if you have multiple pathless layouts if I understand correctly, all would go under one empty string, which again will not be desirable.

[monarcode]

i am facing this issue at the moment and would be most grateful for a solution..

need to have routes like login, register, etc to have their own "auth" layout, adding a directory and a _layout file works but would be great if i didnt have to add directories(and by extension url paths) to get separate layout.

Also, a root level layout, i have tried adding a _layout file to the pages directory itself and basically give all routes(except like auth routes above) a general layout, but this does not work, when i do that nothing renders..work around i came up with is to use _app to conditionally add or remove layout globally and to auth routes, based on pathname.

how can i get around this?

[oedotme]

Support for pathless layout groups is now added at v1.6.14

@monarcode You can now define multiple pathless layouts, here's an example:

src/pages/ 
├── (app)/
│   ├── _layout.tsx
│   ├── home.tsx            /home           wrapped by (app)/_layout.tsx
│   └── profile.tsx         /profile        wrapped by (app)/_layout.tsx
├── (auth)/
│   ├── _layout.tsx
│   ├── login.tsx           /login          wrapped by (auth)/_layout.tsx
│   └── register.tsx        /register       wrapped by (auth)/_layout.tsx
└── admin/
    ├── _layout.tsx
    └── index.tsx           /admin          wrapped by admin/_layout.tsx

Something to avoid tho, is to have duplicate routes in two different pathless layout groups for example pages/(app)/index.tsx and pages/(auth)/index.tsx; because only one of them will match / route depending on the routing library ranking and it might be unexpected.

Lastly for root level layout, you should only use pages/_app.tsx. pages/_layout.tsx will not work.

Hope that helps!