continuing-cyan

how do you correctly mix path named routes & layouts?

https://stackblitz.com/edit/tanstack-router-hox4ss?file=src%2Froutes%2F%24lang%2F%24entityid%2F_layout.tsx I have this file directory structure but it won't match when I go to https://tanstackrouterhox4ss-4t4w--3001--3f7046a7.local-corp.webcontainer.io/aaa/bbb

Amir Ghezelbash

StackBlitz

Router Kitchen Sink File Based Example (forked) - StackBlitz

Run official live example code for Router Kitchen Sink File Based, created by Tanstack on StackBlitz

25 Replies

continuing-cyanOP•2y ago

btw /aaa/bbb/layout is working

continuing-cyanOP•2y ago

I tried this it's not working either 😦

rare-sapphire•2y ago

Using layout routes, you typically want to drop the routes under the layout in a folder with that name. https://stackblitz.com/edit/tanstack-router-iwxx8v?file=src%2Froutes%2F%24lang%2F%24entityid%2F_app-layout%2Findex.tsx I did this, and it worked.

Sean Cassiere

StackBlitz

Layout routes fix - StackBlitz

Run official live example code for Router Kitchen Sink File Based, created by Tanstack on StackBlitz

continuing-cyanOP•2y ago

gonna give it a try and let you know how it goes @Sean Cassiere

continuing-cyanOP•2y ago

it does not render anything for me in the link you posted @Sean Cassiere

continuing-cyanOP•2y ago

this works though

continuing-cyanOP•2y ago

Problem is I want to have multiple pages in the $entityId with that should be wrapped by the same layout Basically i'm trying to achieve this: app.com/$lang/$entityId/page1 (...2,3,4 different pages) app.com/en/entiy-example-id/page1 app.com/en/entiy-example-id/page2 app.com/en/entiy-example-id/page3 app.com/en/entiy-example-id/page4 all pages should have the same layout

continuing-cyanOP•2y ago

I can't do it this way either because $entityId is not the same name as _app-layout

rare-sapphire•2y ago

Have you tried placing $entityId inside of a folder called _app-layout? Also, why can't app-layout be inside of entityid? Otherwise, how would you get the $entityid to pass into navigation components of _app-layout? Because if your layouts are set up at the $lang directory, then you wouldn't have access to the $entityid params.

rare-sapphire•2y ago

I've got an example here, you can still have pages within $entity that are not wrapped in _layout. I've trimmed in down to what we are talking about here. https://stackblitz.com/edit/github-npuuth?file=src%2Froutes%2F%24lang%2F%24entity%2F_layout.tsx

Sean Cassiere

StackBlitz

layout routes go brrr - StackBlitz

Run official live example code for Router Basic File Based, created by Tanstack on StackBlitz

continuing-cyanOP•2y ago

in your example there is a layout in the url: en-US/12345/layout/ what I need is to be able to have more nested routes for example: en-US/12345/setting en-US/12345/invoices en-US/12345/staff ... this is ruining the entire point of layouts right? they are supposed to not be included in the URL 🤔 @Sean Cassiere also why do you use a .component.tsx? is that something special?

dependent-tan•2y ago

Just found this: https://tanstack.com/router/v1/docs/guide/code-splitting#easier-code-splitting-with-file-based-routing

Code Splitting | TanStack Router Docs

Code splitting is a powerful technique for improving the bundle size and load performance of an application. Reduces the amount of code that needs to be loaded on initial page load

rare-sapphire•2y ago

Fixed. https://stackblitz.com/edit/github-npuuth?file=src%2Froutes%2F%24lang%2F%24entity%2Fchilling.component.tsx

Sean Cassiere

StackBlitz

DND nested param routes with layout - StackBlitz

Run official live example code for Router Basic File Based, created by Tanstack on StackBlitz

rare-sapphire•2y ago

It allows me to not have to define the new FileRoute stuff and creates a virtual route in the routeTree.gen.ts file.

continuing-cyanOP•2y ago

thanks a million @Sean Cassiere it's working now.

continuing-cyanOP•2y ago

just to confirm, making this route.tsx was the key to make it work right?

rare-sapphire•2y ago

Yup, for whatever reason only with it and its Outlet component did it work. I wish I understood why, but realistically it could unremain touched for the rest of the repos history so 🤷🏼‍♀️

wise-white•2y ago

I think you could just do an empty object as well instead of adding only the outlet component. Seems to work on my end

continuing-cyanOP•2y ago

yup it does. thanks

Gaming

Programming

how do you correctly mix path named routes & layouts?

Did you find this page helpful?