How to have a layout route not apply to the index route

[Isaac-Leonard]

I've got a subdirectory at "/routes/play" that has a layout route at "/routes/play/route.tsx" which wraps every file in that subdirectory properly.
In "/routes/play/route.tsx" I've got a back button at the top of the page that will take the user to the parent directory of what ever route they are currently on.
My issue is that I don't want this button to render on "/routes/play/index.tsx"
Is there a way to not use the layout component for the index file or otherwise use some path matching logic in the layout component to conditionally render the back button if the "routes/play/index.tsx" page is rendered?
I've tried reading the docs and some related discussions but the naming conventions seem to all be confused and I couldn't find a proper way to make it work.

For context my layout component looks like this:

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

export const Route = createRootRoute({
  component: () => {
    const navigate = useNavigate();
    return (
      <div>
        <button onClick={() => navigate({ to: ".." })}>Back</button>
        <Outlet />
      </div>
    );
  },
});

[schiller-manuel]

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

[Isaac-Leonard]

I'm blind and stackblits doesn't seem to be particularly screen reader friendly, I can link an example in a minimal git repo in a bit when I get some time however, will that do?

[schiller-manuel]

of course, a GitHub repo is fine.

[5ebastianMeier]

You could check if you're directly on the index route with useMatches and if so directly return the Outlet in an early exit block.
If you want to simplify the check you could provide some kind of id in the staticData property of the index route. Then you only would need to verify if the current match has that attribute like so:

const matches = useMatches();
const currentMatch = matches.slice(-1);
const isIndexRoute = currentMatch.staticData.id === "myIndex";
if (isIndexRoute) {
  return <Outlet />;
}
// your full layout