feat: add optional shellComponent to root route #4528
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
View your CI Pipeline Execution ↗ for commit e62a811.
☁️ Nx Cloud last updated this comment at |
There was a problem hiding this comment.
Pull Request Overview
This PR introduces an optional shellComponent hook on root routes, allowing consumers to wrap all route content in a custom layout component. Key changes include:
- Extending core route types to include a
shellComponentfield. - Updating Solid- and React-specific
Matchcomponents to render the shell wrapper when on a root route. - Adjusting example apps to demonstrate usage of
shellComponent.
Reviewed Changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/solid-router/src/route.tsx | Augment RootRouteOptionsExtensions with shell API |
| packages/solid-router/src/Match.tsx | Wrap root matches in shellComponent |
| packages/router-core/src/route.ts | Add default and extension interfaces for shell |
| packages/router-core/src/index.ts | Export the new extension interface |
| packages/react-router/src/route.tsx | Mirror shell API and adjust React types |
| packages/react-router/src/index.tsx | Remove now-unneeded ReactNode alias |
| packages/react-router/src/Matches.tsx | Replace ReactNode alias with React.ReactNode |
| packages/react-router/src/Match.tsx | Wrap root matches in shellComponent |
| examples/solid/start-basic/src/routes/__root.tsx | Update root example to use shellComponent |
| examples/react/start-basic/src/routes/__root.tsx | Update root example to use shellComponent |
Comment on lines
63
to
65
| shellComponent: RootDocument, | ||
| }) | ||
|
|
||
| function RootComponent() { | ||
| return ( | ||
| <RootDocument> | ||
| <Outlet /> | ||
| </RootDocument> | ||
| ) | ||
| export function Layout({ children }: { children: React.ReactNode }) { | ||
| return <div>{children}</div> | ||
| } | ||
|
|
||
| function RootDocument({ children }: { children: React.ReactNode }) { |
There was a problem hiding this comment.
The Layout component is declared but never used. Consider removing it or wiring it up (e.g., using it as the shellComponent) to avoid dead code in the example.
Copilot uses AI. Check for mistakes.
More templates
@tanstack/arktype-adapter
@tanstack/directive-functions-plugin
@tanstack/eslint-plugin-router
@tanstack/history
@tanstack/react-router
@tanstack/react-router-devtools
@tanstack/react-router-with-query
@tanstack/react-start
@tanstack/react-start-client
@tanstack/react-start-plugin
@tanstack/react-start-server
@tanstack/router-cli
@tanstack/router-core
@tanstack/router-devtools
@tanstack/router-devtools-core
@tanstack/router-generator
@tanstack/router-plugin
@tanstack/router-utils
@tanstack/router-vite-plugin
@tanstack/server-functions-plugin
@tanstack/solid-router
@tanstack/solid-router-devtools
@tanstack/solid-start
@tanstack/solid-start-client
@tanstack/solid-start-plugin
@tanstack/solid-start-server
@tanstack/start-client-core
@tanstack/start-plugin-core
@tanstack/start-server-core
@tanstack/start-server-functions-client
@tanstack/start-server-functions-fetcher
@tanstack/start-server-functions-server
@tanstack/valibot-adapter
@tanstack/virtual-file-routes
@tanstack/zod-adapter
commit: |
c339060 to
9be7ee5
Compare
tannerlinsley
approved these changes
Jun 26, 2025
9be7ee5 to
e62a811
Compare
schiller-manuel
added a commit
that referenced
this pull request
Jul 7, 2025
TypeScript cannot infer the return type of a component if it directly (e.g. inside a fragment) returns route state.
```tsx
const fooRoute = createRoute({
getParentRoute: () => rootRoute,
path: 'foo/$id',
validateSearch: (search) => ({ hello: search.hello }) as { hello: string },
component: () => <>foo {fooRoute.useParams().id}</>,
})
```
This results in the following compiler error:
> 'component' implicitly has return type 'any' because it does not have a return type annotation and is referenced directly or indirectly in one of its return expressions.ts(7023)
This commit reverts the change in #4528 that required the return type of a route component to be of `React.ReactNode` and uses `any` again.
Strict typing of the route components can be enabled via module augmentation:
```tsx
declare module '@tanstack/react-router' {
interface RouteTypes<TProps> {
component: React.FC<TProps>
}
}
```
In the strict case, the above example compiles with an explicit return type annotation:
```tsx
const fooRoute = createRoute({
getParentRoute: () => rootRoute,
path: 'foo/$id',
validateSearch: (search) => ({ hello: search.hello }) as { hello: string },
component: () : React.JSX.Element => <>foo {fooRoute.useParams().id}</>,
})
```
fixes #4560
|
Hi @schiller-manuel i was trying spa mode, after build the _shell.html in output doesn’t include html & body element rendered by component option given to createRootRoute. is it not the expected behaviour or shellComponent is expected to be used for this? |
|
@Nandan1996 please create a new issue including a complete minimal example |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.