wise-white

Layouts & folder structure

yeah

123 Replies

ugly-tan•2y ago

bet

wise-whiteOP•2y ago

yep so

import {createFileRoute, Outlet} from "@tanstack/react-router";

export const Route = createFileRoute('/auth/')({
    component: LayoutComponent,
})


function LayoutComponent() {

    console.log("rendering layout")

    return (
        <div className="flex flex-col justify-center items-center h-screen w-full bg-red-400">
            <Outlet/>
        </div>
    )
}

import {createFileRoute, Outlet} from "@tanstack/react-router";

export const Route = createFileRoute('/auth/')({
    component: LayoutComponent,
})


function LayoutComponent() {

    console.log("rendering layout")

    return (
        <div className="flex flex-col justify-center items-center h-screen w-full bg-red-400">
            <Outlet/>
        </div>
    )
}

there is my index.tsx file

ugly-tan•2y ago

and the path /auth/ was generated with the vite right?

wise-whiteOP•2y ago

export const Route = createFileRoute('/auth/login')({
    component: () => SignIn(),
});

export default function SignIn() {

    //const searchParams = useSearchParams();

export const Route = createFileRoute('/auth/login')({
    component: () => SignIn(),
});

export default function SignIn() {

    //const searchParams = useSearchParams();

and the login.tsx I written it manually

ugly-tan•2y ago

you shouldnt be doing that, the vite plugin should take care of that try to save and see if it chagnes it

wise-whiteOP•2y ago

I removed it, it generated it as /auth/

ugly-tan•2y ago

okay good so, try to have some span with text in the auth pah path and see if it renders in login prety much

wise-whiteOP•2y ago

bg-red-400 should be great

wise-whiteOP•2y ago

wise-whiteOP•2y ago

there's no bg-red applied

ugly-tan•2y ago

you sure teher aint any overwriting in your login file or something try to remove the outlet for a second see if the page is still there

wise-whiteOP•2y ago

yep, the page sill there on path /auth/login

ugly-tan•2y ago

hm not sure. when I remove my outlet it does effect the children. but again, im using nested folders. maybe its because of that.

wise-whiteOP•2y ago

probably, but using nested folders is very messy as you said

ugly-tan•2y ago

I'm afraid you'll have to wait to someone with a bit more knowledge than me haha 😔

wise-whiteOP•2y ago

np ahah, thanks!

rival-black•2y ago

look in the browser devtools, does bg-red-400 get applied to the div?

wise-whiteOP•2y ago

the /login page is rendered without the outlet in the index.tsx

wise-whiteOP•2y ago

nop 😦 it doenst appear at all

ugly-tan•2y ago

when you are in just auth/, does it render anything that is in the index.tsx?

wise-whiteOP•2y ago

yeap, it render the red bg

rival-black•2y ago

here, the SignIn component isnt being passed correctly?

export const Route = createFileRoute('/auth/login')({
    component: SignIn,
    // BEFORE: component: () => SignIn(),
});

export default function SignIn() {
  // ...

export const Route = createFileRoute('/auth/login')({
    component: SignIn,
    // BEFORE: component: () => SignIn(),
});

export default function SignIn() {
  // ...

wise-whiteOP•2y ago

ugly-tan•2y ago

to me it sounds like a bug Gotta wait for Tanner to come around and check it out

wise-whiteOP•2y ago

yep, doesn't work aswell

rival-black•2y ago

im pretty sure the layout should be createFileRoute("/_auth") it needs to underscore prefix otherwise youre creating a route for /auth (the index route for /auth)

wise-whiteOP•2y ago

yep but vite plugin changes it

ugly-tan•2y ago

rename the folder tho, I dont think it will fix the problem the vite plugin reflects your files/folders so just keep that in mind

wise-whiteOP•2y ago

yep, doesnt work, changed login too

rival-black•2y ago

auth/
  _auth-layout/
    index.tsx
    login.tsx
  _auth-layout.tsx

auth/
  _auth-layout/
    index.tsx
    login.tsx
  _auth-layout.tsx

then in _auth-layout:

export const Route = createFileRoute('/auth/_auth-layout')({
  component: LayoutComponent
});

export const Route = createFileRoute('/auth/_auth-layout')({
  component: LayoutComponent
});

wise-whiteOP•2y ago

i can try that

rival-black•2y ago

im not sure if you can flatten the nested folders by using .

wise-whiteOP•2y ago

http://localhost:5173/auth/login appear as not found

wise-whiteOP•2y ago

oh, i need an index.tsx i think? nop not found

ugly-tan•2y ago

_auth-layout.tsx should be route.tsx I think

wise-whiteOP•2y ago

and the folder?

ugly-tan•2y ago

folder should stay the same

wise-whiteOP•2y ago

_auth-layout?

ugly-tan•2y ago

keep the folder name route.tsx is a special name

wise-whiteOP•2y ago

route.tsx should contains my layout?

import {createFileRoute, Outlet} from "@tanstack/react-router";

export const Route = createFileRoute('/auth')({
    component: LayoutComponent,
})


function LayoutComponent() {

    return (
        <div className="flex flex-col justify-center items-center h-screen w-full bg-red-400">
            <Outlet/>
        </div>
    )
}

import {createFileRoute, Outlet} from "@tanstack/react-router";

export const Route = createFileRoute('/auth')({
    component: LayoutComponent,
})


function LayoutComponent() {

    return (
        <div className="flex flex-col justify-center items-center h-screen w-full bg-red-400">
            <Outlet/>
        </div>
    )
}

ugly-tan•2y ago

yeah

wise-whiteOP•2y ago

it doesn't work

wise-whiteOP•2y ago

ugly-tan•2y ago

damn Guess you gotta wait for Tanner to clear things out 😭 I think we are mixing multiple approches and that makes issues

wise-whiteOP•2y ago

yeah i think I can't go further in my project until I don't know how to do it without making it messy... @Sean Cassiere

wise-white•2y ago

Hey, what's the URL structure you are trying to achieve? And which of them need to share the same layout?

wise-whiteOP•2y ago

I just want to apply some layout to /auth/login and /auth/register

wise-white•2y ago

Just to confirm, the route structure would be as follows?

/auth/login <- authLayout
/auth/register  <- authLayout
/whatever
/index

/auth/login <- authLayout
/auth/register  <- authLayout
/whatever
/index

wise-whiteOP•2y ago

yep

wise-white•2y ago

Gimme 10 mins, I'll throw it into a Stackblitz

wise-whiteOP•2y ago

thanks !!

wise-white•2y ago

Here you go. https://stackblitz.com/edit/github-odjbcq?file=src%2Froutes%2F_layout.tsx

Sean Cassiere

StackBlitz

discord @wailroth layout routes v1 - StackBlitz

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

wise-whiteOP•2y ago

ok yep I see but if I want a auth folder, how can I do it ? because if I have to create all my routes in the same folder, it'll be a bit messy moreover, if a have to create a _layout folder in the routes folder in middle of nowhere

wise-white•2y ago

Let me give it a shot. The router-cli is can be opinionated in the way it accepts the routing structure.

wise-whiteOP•2y ago

okay !

wise-white•2y ago

This is definitely looking like a bug. Could you use both the previous Stackblitz example and this one below and file a bug report at github.com/Tanstack/router? https://stackblitz.com/edit/github-odjbcq-wjavnw?file=src%2Froutes%2F__root.tsx

Sean Cassiere

StackBlitz

discord @wailroth layout routes v2 - StackBlitz

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

wise-whiteOP•2y ago

okay, i'll do that 🙂 but what can I do, waiting for a patch ? what structure should I use ? I think you should create auth and register file to understand exactly what we want

wise-white•2y ago

Both are present in the example.

wise-white•2y ago

In the meantime, not sure exactly what you are sharing between the routes using a Layout, but this could work. https://stackblitz.com/edit/github-odjbcq-cp7lm3

Sean Cassiere

StackBlitz

discord @wailroth layout routes alternate - StackBlitz

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

wise-whiteOP•2y ago

this isnt working in my project

wise-white•2y ago

But this is not perfect since that means you'd only be able to set up a /login and /register route under /auth. Could you share please?

wise-whiteOP•2y ago

wep, wait a minute wtf it's working it's the demo thing, when you want to demonstrate something not working, it'll work yesterday it not worked oh no we use index.tsx not route.tsx

wise-white•2y ago

The best alternate would just be to use this flatter routing for this route, and just rename when the fix is released. https://stackblitz.com/edit/github-odjbcq?file=src%2Froutes%2F_layout.tsx

Sean Cassiere

StackBlitz

discord @wailroth layout routes v1 - StackBlitz

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

wise-whiteOP•2y ago

ok yep, but if I have multiple layout ?

wise-white•2y ago

Like? multiple layouts under /auth?

wise-whiteOP•2y ago

no, like multiple layouts in my whole project like one for the auth, one for the admin page

wise-white•2y ago

It depends on if they are nested under another route. Currently this works

/_layout/login.tsx -> /login

auth._layout.login.tsx -> /auth/login

/_layout/login.tsx -> /login

auth._layout.login.tsx -> /auth/login

Its just that this doesn't work

/auth/_layout/login.tsx -> /auth/layout/login

/auth/_layout/login.tsx -> /auth/layout/login

That's what the bug report should solve.

wise-whiteOP•2y ago

yep

wise-whiteOP•2y ago

but for a temporary fix, using this https://stackblitz.com/~/edit/github-odjbcq?file=src%2Froutes%2F_layout.tsx

StackBlitz

discord @wailroth layout routes v1 - StackBlitz

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

wise-whiteOP•2y ago

can I like create _auth folder that referer to a layout?

wise-white•2y ago

Ohhhhh Yea yea I just use the _layout so I know exactly what I'm looking at without having to think too much when problem solving. Drop the bug report link here once you've created it.

wise-whiteOP•2y ago

https://github.com/TanStack/router/issues/1150

GitHub

Layout in folder doesn't work · Issue #1150 · TanStack/router

Describe the bug Currently this works /_layout/login.tsx -> /login auth._layout.login.tsx -> /auth/login Its just that this doesn't work /auth/_layout/login.tsx -> /auth/layout/login A...

wise-whiteOP•2y ago

this is working btw

wise-white•2y ago

By the way, if you add a route.tsx file and a random route (like index.tsx), it then works. https://stackblitz.com/edit/github-odjbcq-hfq9yv?file=src%2Froutes%2Fauth%2Froute.tsx

Sean Cassiere

StackBlitz

discord @wailroth layout routes v3 - StackBlitz

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

wise-whiteOP•2y ago

wtf lol question out the box, you know how to get router from a componenent ? to redirect user to google auth page router.nagivate() just using useRouter work ?

wise-white•2y ago

useRouter is the best way to get the router instance. In a component, the useNavigate({ from: '/wherever' }) hook also works if you want to programatically navigate a user. If you just always want them navigated away, then the <Navigate /> component also works.

wise-whiteOP•2y ago

okay! thanks for all

grumpy-cyan•2y ago

@Sean Cassiere hey Sean is it possible to remove the __root top bar for the login page ? how the folder structure would look like ?

wise-white•2y ago

Its purely a matter of what you are trying to achieve. If your header/top-bar isn't required on all pages, then it may be advisable to remove it from the root route and use a layout route instead. Layout routes are transparent to the URL, while still letting define some logic and components that'll be shared by all the routes within it. See the Basic file-based example, where the layout route encapsulates a component that is only shared by a subset of routes.

React Router Basic File Based), Example | TanStack Router Docs

An example showing how to implement Basic File Based), in React Router

optimistic-gold•2y ago

So is: /auth/_layout/login.tsx -> /auth/layout/login the intended behaviour? From what I understood from the docs, the pathless portion of the route (i.e. with underscore) doesn't form part of the URL

wise-white•2y ago

Yes

optimistic-gold•2y ago

I see, thank you! In that case, is there a way to achieve a layout which is not the first segment (similar to above, a/_b/c.tsx) , where _b is invisible in the URL? Also, would this mean that the behaviour would differ between flat and dir-based routing? e.g.

routeA
  _layout.tsx
  _layout
    a.tsx              <-----routeA/a

routeA
  _layout.tsx
  _layout
    a.tsx              <-----routeA/a

as opposed to

routeA._layout.tsx
routeA._layout.a.tsx   <-----routeA/layout/a

routeA._layout.tsx
routeA._layout.a.tsx   <-----routeA/layout/a

(for instance, like @prime showed here: https://discord.com/channels/719702312431386674/1210515793083764746/1210525067084042290)

Discord

Discord - A New Way to Chat with Friends & Communities

Discord is the easiest way to communicate over voice, video, and text. Chat, hang out, and stay close with your friends and communities.

wise-white•2y ago

You should be able to do this.

routeA/
  _layout.tsx
  _layout/
    a.tsx

routeA/
  _layout.tsx
  _layout/
    a.tsx

and have your route come out as /routeA/a, but currently there is a bug with the routeTree generation when using layout routes in a nested folder like in the structure above. The issue is here on github. The current work arround is just to insert a route.tsx in the routeA folder till a fix can be administered which'll generate the URLs as routeA/a.

routeA/
  route.tsx <- just leave and empty route config or just render an <Outlet /> here
  _layout.tsx
  _layout/
    a.tsx

routeA/
  route.tsx <- just leave and empty route config or just render an <Outlet /> here
  _layout.tsx
  _layout/
    a.tsx

GitHub

Issues · TanStack/router

🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - Issues · TanStack/router

wise-white•2y ago

This should now be fixed as of 1.19.2.

optimistic-gold•2y ago

I'm not sure if I'm doing something wrong, but I'm still struggling to get it to work

equal-aqua•2y ago

how does the generated route tree look like? ideally, create a minimal example by forking one of the existing Stackblitz examples

optimistic-gold•2y ago

*other routes taken out for clarity

optimistic-gold•2y ago

I'll try and reproduce it by tomorrow Sorry, just double checked and for some reason the @tanstack/router package had been bumped up to 1.19.2 but not the vite plugin. Updated it manually and working all good now, thank you so much for working on this!

equal-aqua•2y ago

very good thanks for the update

wise-white•2y ago

Just woke up and getting to this message was a huge sigh of relief 😅

equal-aqua•2y ago

don't want to kill your morning @Sean Cassiere but... https://github.com/TanStack/router/issues/1279 😄

GitHub

Layout Index Routes Don't Have Proper Id · Issue #1279 · TanStack/r...

Describe the bug Follow up of #1150. Something in this changes caused the route id's to get a bit strange. Also causing confusion in dev tools File Tree: Router Dev Tools: Your Example Website ...

wise-white•2y ago

damn... Will get a cup of coffee and check it out fixed

optimistic-gold•2y ago

Hey guys, just wanted to check if this is fixed, since it seems not to work with route file prefixes (also it seems 1.19.3 version of vite plugin doesn't import lazy routes in routeTree.gen.ts so entire app crashes)

equal-aqua•2y ago

can you please provide a minimal complete example e.g. by forking one of the existing examples on stackblitz

optimistic-gold•2y ago

https://stackblitz.com/edit/github-odjbcq-q1tyhj?file=src%2Froutes%2F~auth%2F~route.lazy.tsx sorry, added a minor change you can switch in package.json to 1.19.2 to see the not found problem

equal-aqua•2y ago

@Sean Cassiere are you taking a look?

absent-sapphire•2y ago

Upgraded to the latest today and feel like parameterized routes also cause this breakage in nested folders 😦. I put a comment on the #1150 with my router structure https://github.com/TanStack/router/issues/1150

equal-aqua•2y ago

@h3llo @Marcus we fixed a few bugs in https://github.com/TanStack/router/releases/tag/v1.19.5

GitHub

Release v1.19.5 · TanStack/router

Version 1.19.5 - 3/9/2024, 11:36 PM Changes Fix router-generator: incorrect route-tree generation for nested layout routes (#1285) (f855ec1) by Sean Cassiere Packages @tanstack/router-generator@...

equal-aqua•2y ago

please let us know if there are still issues

optimistic-gold•2y ago

it's not crashing, but its still giving not found (same example as above)

equal-aqua•2y ago

this one?

equal-aqua•2y ago

the route does not exist

equal-aqua•2y ago

optimistic-gold•2y ago

no, mine

equal-aqua•2y ago

isn't this the one?

optimistic-gold•2y ago

yeah, after removing the login and register I get empty content on the route

absent-sapphire•2y ago

I don't see it on npm yet, is there a next version I can hit? 🙏 https://www.npmjs.com/package/@tanstack/react-router?activeTab=versions

npm

@tanstack/react-router

Latest version: 1.19.4, last published: 3 hours ago. Start using @tanstack/react-router in your project by running npm i @tanstack/react-router. There are 11 other projects in the npm registry using @tanstack/react-router.

equal-aqua•2y ago

its the vite-plugin / the generator

equal-aqua•2y ago

https://www.npmjs.com/package/@tanstack/router-vite-plugin

npm

@tanstack/router-vite-plugin

Latest version: 1.19.5, last published: 30 minutes ago. Start using @tanstack/router-vite-plugin in your project by running npm i @tanstack/router-vite-plugin. There is 1 other project in the npm registry using @tanstack/router-vite-plugin.

equal-aqua•2y ago

https://www.npmjs.com/package/@tanstack/router-generator

npm

@tanstack/router-generator

Latest version: 1.19.5, last published: 31 minutes ago. Start using @tanstack/router-generator in your project by running npm i @tanstack/router-generator. There are 2 other projects in the npm registry using @tanstack/router-generator.

equal-aqua•2y ago

I am not sure that the ~route.tsx file makes sense inside of a layout folder? IMO the a route.tsx only works if its parent folder is NOT a layout folder what do you want to express here?

optimistic-gold•2y ago

you are right, I'll rename them to name.lazy.tsx and name.tsx

equal-aqua•2y ago

or you can swap the layout folder to the outside:

./routes/~_auth/~auth/~route.lazy

./routes/~_auth/~auth/~route.lazy

equal-aqua•2y ago

see https://stackblitz.com/edit/github-odjbcq-vu361j

Manuel Schiller

StackBlitz

discord @wailroth layout routes v3 (forked) - StackBlitz

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

optimistic-gold•2y ago

yeah, that's how I did it

absent-sapphire•2y ago

Upgraded to "@tanstack/router-vite-plugin": "1.19.5" and still seeing it not work 😢 . Here's a repro: https://stackblitz.com/edit/tanstack-router-ymuvrk. It's not picking it up at all now it looks like

optimistic-gold•2y ago

try the option of swapping the layout folder to outside. The bug seems to be in the link component since it has /$workspaceSlug/workspaceLayout/foo while layouts should be ignored

absent-sapphire•2y ago

Hrmmmm, That does appear to work for this case but my app is going to have many nested views with the $something pattern 😬. Workaround version: https://stackblitz.com/edit/tanstack-router-lewkys

equal-aqua•2y ago

@Marcus this is now fixed in "@tanstack/router-vite-plugin": "1.19.6" please let us know if all works as expected

absent-sapphire•2y ago

Super speedy! Will try when I get back to the house 🙏. Is there a convention on whether you should wrap above or below a parameterized route?

equal-aqua•2y ago

not aware of a convention, it depends on your use case I'd say.

Gaming

Programming

Layouts & folder structure

Did you find this page helpful?