How can I use file based routing as a module?

[ahmetkuslular]

I have an admin panel package that previously used React Router. In the old setup, I received a resources prop, which contained route configurations and menu items for the admin panel.

Example:

const resources = [
  {
    name: 'posts',
    list: PostList, // Generates the route /posts
    create: PostCreate, // Generates the route /posts/create
    ...
  }
];

<Admin resources={resources} />;

Now, I want to take this approach to the next level using TanStack Router with file-based routing. In this new structure, I no longer want users to pass a resources prop. Since file-based routing already handles route generation, I want the system to derive routes automatically.

Instead, users will define their own router and pass it to the Admin component:

import { routeTree } from './routeTree.gen'

const router = createRouter({
    routeTree,
    context: {},
    defaultPreload: 'intent',
    scrollRestoration: true,
    defaultStructuralSharing: true,
    defaultPreloadStaleTime: 0,
});

<Admin router={router} />;

This gets me closer to my goal, but I am facing a key challenge: The project's root layout is defined inside the Admin component. However, TanStack Router expects me to define a __root.tsx file in the location where the routeTree is built. Since the root is already handled within Admin, this creates a conflict.

Desired Folder Structure:

/routes
├── posts/
│   ├── index.tsx
│   ├── create.tsx
│   ├── $postId.tsx
├── users/
│   ├── index.tsx
│   ├── create.tsx
│   ├── $userId.tsx

I'm open to reconsidering my approach. How can I best align this structure with TanStack Router while maintaining the Admin component as the central provider? I'd appreciate any guidance on this.