afraid-scarlet

Multiple outlets

Hi. I've an app where there is a login screen that has completely different ui than whole app. I'd like root route - / to have no additional ui and for all of the other routes I'd like to use <Outlet /> thats wrapped with a navbar etc. How can I achive it?

14 Replies

fair-rose•2y ago

There are multiple options for this: Do you want the login screen to have it's own url? (e.g. '/login') Login screen has its own url You will need to wrap your app in a layout route.

/routes/__root.tsx
/routes/_auth.tsx
/routes/_auth/login.tsx
/routes/_app.tsx
/routes/_app/dashboard.tsx
/routes/_app/...

/routes/__root.tsx
/routes/_auth.tsx
/routes/_auth/login.tsx
/routes/_app.tsx
/routes/_app/dashboard.tsx
/routes/_app/...

Put your navbar in /routes/_app.tsx. (Please note that even if /routes/_auth.tsx might do nothing, you need the route to exists, due to an currently unresolved bug.) Login screen has no own url You can just check in your rootRoute and either return an Outlet or the Login form:

if (isAuthenticated()) return <Outlet />
else return <Login />

if (isAuthenticated()) return <Outlet />
else return <Login />

If you then want all other routes to be wrapped in a navbar, you have two options: - wrap the outlet with another component:

if (isAuthenticated()) return (
  <AppContainer><Outlet /></AppContainer>
)

if (isAuthenticated()) return (
  <AppContainer><Outlet /></AppContainer>
)

- use a layout route (see above)

afraid-scarletOP•2y ago

Hmmm

// routes/app/index.tsx
import { beforeLoad } from "@/routes/app/-auth";
import { NavLayout } from "@/routes/app/-nav-layout";
import { createFileRoute } from "@tanstack/react-router";
import { Outlet } from "@tanstack/react-router";

export const Route = createFileRoute("/app/")({
    beforeLoad,
    component: () => (
        <NavLayout>
            <Outlet />
        </NavLayout>
    ),
});

// routes/app/index.tsx
import { beforeLoad } from "@/routes/app/-auth";
import { NavLayout } from "@/routes/app/-nav-layout";
import { createFileRoute } from "@tanstack/react-router";
import { Outlet } from "@tanstack/react-router";

export const Route = createFileRoute("/app/")({
    beforeLoad,
    component: () => (
        <NavLayout>
            <Outlet />
        </NavLayout>
    ),
});

// routes/app/settings/index.tsx
export const Route = createFileRoute("/app/settings/")({
    beforeLoad,
    component: () => <Settings />,
});

// routes/app/settings/index.tsx
export const Route = createFileRoute("/app/settings/")({
    beforeLoad,
    component: () => <Settings />,
});

Should Settings page be wrapped inside nav layout with this code? Well, that doesnt work tho Thats my structure

afraid-scarletOP•2y ago

afraid-scarletOP•2y ago

so the index.tsx near __root is the login page And anything starting from /app should be - but is not - wrapped with navlayout.tsx

fair-rose•2y ago

By the way: if you don't want /app to be part of your url, you can put a underscore: _app.

afraid-scarletOP•2y ago

Sure But I still can't figure it out Why nav layout isnt there 😄

fair-rose•2y ago

Ah wait, the nav layout should be in the file routes/app.tsx. (not routes/app/index.tsx)

afraid-scarletOP•2y ago

What is app.tsx? What should be in there

fair-rose•2y ago

Or easier: Rename routes/app/index.tsx to routes/app/route.tsx.

afraid-scarletOP•2y ago

That works. but why?

fair-rose•2y ago

A file index.tsx only refers to the path /. So: routes/app/index.tsx matches for the url /app/, but not /app/settings/. You instead want to put the code in the route for the segment /app (not /app/, note the slash at the end) The route file for the path segment /app is routes/app.tsx. routes/app/route.tsx is equivalent to routes/app.tsx.

fair-rose•2y ago

Check this sections of the docs: - https://tanstack.com/router/latest/docs/framework/react/guide/route-trees#index-routes - https://tanstack.com/router/latest/docs/framework/react/guide/file-based-routing#file-naming-conventions

File-Based Routes | TanStack Router Docs

Most of the TanStack Router documentation is written for file-based routing. This guide is mostly intended to help you understand in more detail how to configure file-based routing and the technical details behind how it works. Prerequisites

Route Trees & Nesting | TanStack Router Docs

Like most other routers, TanStack Router uses a nested route tree to match up the URL with the correct component tree to render. To build a route tree, TanStack Router supports both:

afraid-scarletOP•2y ago

Okey That makes sense Thanks for an explanation 🙂

fair-rose•2y ago

You are welcome! This part is tricky; I came across the exact same thing some weeks ago.

Gaming

Programming

Multiple outlets

Did you find this page helpful?