Description
Which project does this relate to?
Router
Describe the bug
Hi team π
Thanks for all the great work on TanStack Router β it's been a pleasure using it.
I wanted to flag a subtle but important issue we ran into when using file-based routing with createRootRoute
, and after updating to 1.121.x
version.
In our project, we follow a convention of placing all exports at the end of the file, so we had something like this:
const Route = createRootRoute({...});
export { Route };
However, with this format, the root route was skipped. None of the logic or layout inside it was applied at all. After some debugging, we realized that simply changing it to this fixed the issue:
export const Route = createRootRoute({...});
It would be great if both export styles could be supported.
Your Example Website or App
https://stackblitz.com/edit/github-dzbsynpg-x5ue7aau
Steps to Reproduce the Bug or Issue
Run the app.
You will see the index route mount, but the root layout is skipped β no red border, no heading, and no console log from the root.
Now update the export in __root.tsx
to:
export const Route = createRootRoute({
component: () => {
console.log("Root route rendered");
return (
<div style={{ border: "2px solid red", padding: 20 }}>
<h1>Root Layout</h1>
<Outlet />
</div>
);
},
});
Expected behavior
The root route should be recognized and rendered whether it's exported as:
export const Route = createRootRoute({...});
or
const Route = createRootRoute({...});
export { Route };
Screenshots or Videos
No response
Platform
- OS: Any
- Browser: Any
- Version: Not browser-related β export handling issue
Additional context
No response