evident-indigo

Can I have layout over my whole app except one route?

I currently have a sidebar setup in my root index.tsx file src/routes/index.tsx but I have an auth route for login and signining up

src/
|--routes/
|  |--index.tsx (main layout)
|  |--_auth.tsx (this has a layout for _auth directory)
|  |--_auth/ 
|  |  |--login.tsx
|  |  |--sign-up.tsx

src/
|--routes/
|  |--index.tsx (main layout)
|  |--_auth.tsx (this has a layout for _auth directory)
|  |--_auth/ 
|  |  |--login.tsx
|  |  |--sign-up.tsx

but let's say i want to add a profile/ directory with profile/index.tsx route and a directory gallery/ with gallery.tsx How can I have those inherit the layout from the root index.tsx? is that possible, I would like to have the main app in / but I am having a hard time wrapping my head around it

7 Replies

like-gold•9mo ago

How can I have those inherit the layout from the root index.tsx

thats not possible at all since index.tsx is a leaf you might mean __root.tsx you can opt out of the parent layout by adding a _ suffix

evident-indigoOP•9mo ago

Oh so anything that has _ suffix does not inherit a layout?

like-gold•9mo ago

does not a inherit its parent ui

evident-indigoOP•9mo ago

ok thank you so much i'll thinker around with that 🙏 tysm hmm that didn't seem to work. I extracted this sidebar to its own component but when I try to go to my _auth routes i get:

Error in renderToPipeableStream:  7 |     if (isProduction) {
 8 |         throw new Error(prefix);
 9 |     }
10 |     var provided = typeof message === 'function' ? message() : message;
11 |     var value = provided ? "".concat(prefix, ": ").concat(provided) : prefix;
12 |     throw new Error(value);
               ^
error: Invariant failed: Could not find an active match from "/"
      at invariant (/Users/kevin/code/src/github/efnf/market/node_modules/tiny-invariant/dist/esm/tiny-invariant.js:12:11)

Error in renderToPipeableStream:  7 |     if (isProduction) {
 8 |         throw new Error(prefix);
 9 |     }
10 |     var provided = typeof message === 'function' ? message() : message;
11 |     var value = provided ? "".concat(prefix, ": ").concat(provided) : prefix;
12 |     throw new Error(value);
               ^
error: Invariant failed: Could not find an active match from "/"
      at invariant (/Users/kevin/code/src/github/efnf/market/node_modules/tiny-invariant/dist/esm/tiny-invariant.js:12:11)

my layout component:

export function RootLayout({ children }: { children: React.ReactNode }) {
    const pageTitle = useStore(pageStore, (state) => state.title);
    return (
        <SidebarProvider>
            <AppSidebar />
            <SidebarInset>
                <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
                    <div className="flex items-center gap-2 px-4">
                        <SidebarTrigger className="-ml-1" />
                        <Separator orientation="vertical" className="mr-2 h-4" />
                        <h1 className="text-lg font-semibold">{pageTitle}</h1>
                    </div>
                </header>
                {children}
            </SidebarInset>
        </SidebarProvider>
    );
}

export function RootLayout({ children }: { children: React.ReactNode }) {
    const pageTitle = useStore(pageStore, (state) => state.title);
    return (
        <SidebarProvider>
            <AppSidebar />
            <SidebarInset>
                <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
                    <div className="flex items-center gap-2 px-4">
                        <SidebarTrigger className="-ml-1" />
                        <Separator orientation="vertical" className="mr-2 h-4" />
                        <h1 className="text-lg font-semibold">{pageTitle}</h1>
                    </div>
                </header>
                {children}
            </SidebarInset>
        </SidebarProvider>
    );
}

my root.tsx

        <RootDocument>
            <RootLayout>
                <Outlet />
                <Toaster />
                <TanStackRouterDevtools position="bottom-right" />
                <ReactQueryDevtools buttonPosition="top-right" />
            </RootLayout>
        </RootDocument>

        <RootDocument>
            <RootLayout>
                <Outlet />
                <Toaster />
                <TanStackRouterDevtools position="bottom-right" />
                <ReactQueryDevtools buttonPosition="top-right" />
            </RootLayout>
        </RootDocument>

i think for now what i can do is just place everything in an (_app) directory - should be fine no need for that much magic hmm actually even doing that i added a new route inside the _app directory called listings.tsx and get the same error

Error in renderToPipeableStream:  7 |     if (isProduction) {
 8 |         throw new Error(prefix);
 9 |     }
10 |     var provided = typeof message === 'function' ? message() : message;
11 |     var value = provided ? "".concat(prefix, ": ").concat(provided) : prefix;
12 |     throw new Error(value);
               ^
error: Invariant failed: Could not find an active match from "/"

Error in renderToPipeableStream:  7 |     if (isProduction) {
 8 |         throw new Error(prefix);
 9 |     }
10 |     var provided = typeof message === 'function' ? message() : message;
11 |     var value = provided ? "".concat(prefix, ": ").concat(provided) : prefix;
12 |     throw new Error(value);
               ^
error: Invariant failed: Could not find an active match from "/"

my sidebar component has this:

const { user } = useRouteContext({ from: "/" });

const { user } = useRouteContext({ from: "/" });

when i comment it out it works so that's probably the issue ```ts const { user } = useRouteContext({ from: "_root" }); ``` seems to be the way the suffix doesn't seem to work with my pathless layout, ill just do the _app way

multiple-amethyst•9mo ago

do you want a pathless layout?

multiple-amethyst•9mo ago

i think what you want is like my dashboard look in the WIP branch. thats where i was tinkering with layouts and and routes for my sidebar https://github.com/Succatash/denoTanstackStart

GitHub

GitHub - Succatash/denoTanstackStart

Contribute to Succatash/denoTanstackStart development by creating an account on GitHub.

multiple-amethyst•9mo ago

add a Outlet instead of {children}

Gaming

Programming

Can I have layout over my whole app except one route?

Did you find this page helpful?