Comments (4)
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!
from generouted.
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.
from generouted.
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.
from generouted.
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?
from generouted.
Related Issues (20)
- Feature Request: Programmatically Handling Routes HOT 4
- No HMR in Action - need to refresh HOT 3
- Feature: Support React Query in React Router HOT 1
- blank page, but generouted scanned my route correctly HOT 3
- Custom path not working HOT 2
- Parentheses directories with a hyphen in the name HOT 1
- Support for .mdx extension HOT 4
- Issues importing @generouted/react-router/client in jest HOT 8
- Stackblitz link is broken HOT 1
- Generated routes output is sometimes not fully written to disk before being processed HOT 1
- How to extends Link component from router file HOT 9
- Can I setting a different entry point instead of './src/router.ts'? HOT 5
- Question: "guard routes" ? HOT 2
- Dynamic Link provided in <Link to /> HOT 4
- Question: usage without TypeScript HOT 3
- Folders without an index file create empty routes HOT 1
- Loaders are executed twice when using React.StrictMode HOT 1
- Modals.close at doesn't redirect when with params HOT 1
- Modals failing from 1.19 HOT 4
- Question about how to do SEO on a per page basis. HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from generouted.