Question about Remix Route Layout and Outlet Content.

[ttizze]

I have a route.tsx file that serves as a common layout for /auth/* routes with an .

How can I display specific content in the Outlet section only when accessing the /auth path directly?

    ├── auth/
    │   ├── route.tsx

[kiliman]

Change the folder to /auth+ and add _layout.tsx. That will be your common layout for all /auth/* routes. This is what I call hybrid routes.

app/routes
└── auth+
    ├── _layout.tsx
    ├── account.tsx
    ├── login.tsx
    └── logout.tsx

[ttizze]

thanks!
my question is bad, I want to display specific data when accessing the auth page.
I understand that layout can be standardized in this way.
For instance, when accessing the account page, the outlet could be replaced with the account component, right?
What I want to achieve is to display something only when accessing auth specifically. Normally, if I write it straightforwardly, it will also appear on pages like account, correct?

I think it could be done by writing it like this, but I feel like there might be a better way.

Layout.tsx
import { Outlet, useLocation } from "remix";

export default function Layout() {
  const location = useLocation();

  return (
    <div>
      <header>Header Component</header>
      {location.pathname === "/auth" && (
        <div>Only visible on the auth page</div>
      )}
      <main>
        <Outlet />
      </main>
      <footer>Footer Component</footer>
    </div>
  );
}

[kiliman]

When I typically need some one-off or custom feature for a specific route, I generally reach for Remix handle https://remix.run/docs/en/main/route/handle

In your layout component, use useMatches to find any route handles.

// Layout.tsx
export default function Layout() {
  const SubHeader = useMatches().find(r => r.handle?.SubHeader)?.handle.SubHeader
  
  return (
    <div>
      <header>Header Component</header>
      {SubHeader && <SubHeader />}
      <main>
        <Outlet />
      </main>
      <footer>Footer Component</footer>
    </div>
  );
}

Then in your auth route, simply export a handle with your custom SubHeader component

// routes/auth/route.tsx
export const handle = {
  SubHeader = () => <div>Only visible on the auth page</div>
};
// ...

[ttizze]

Thank you so much!