DEV Community

Discussion on: Custom Layout for Specific Route Group in Tanstack Router - Solution

View post
Collapse
 
jhaemin profile image
Jang Haemin •

Here is a complete solution that achieves multiple root routes while leveraging the efficient partial route rendering.

This solution uses pathless routes for both route groups.

src/routes/
      _dashboard/
        dashboard/
          index.tsx
          products.tsx
        route.tsx  <- Layout for dashboard pages
      _regular/
        index.tsx  <- It replaces the root index.tsx
        product.tsx
        route.tsx  <- Layout for regular pages
        search.tsx
Enter fullscreen mode Exit fullscreen mode

These are the keys.

  • Remove routes/index.tsx and create routes/_regular/index.tsx.
  • Move layout code from __root.tsx to _regular/route.tsx.

Note that routes/index.tsx and routes/_regular/index.tsx cannot exist at the same time.

Collapse
 
xb16 profile image
حذيفة •

I saw like this solution in the issue discussion before, it didn't work to me, or may be I didn't understand it well, it was confusing.
and about pathless layout, I read about it before in the official documentation and it didn't work also.

Anyway !

When I looked at your solution, I realized I had been overcomplicating things. I tried your approach in my project, and it worked well—at least until I ran into the following error:

Error: rootRouteNode must not be undefined. Make sure you've added your root route into the route-tree.
Make sure that you add a "__root.tsx" file to your routes directory.
Enter fullscreen mode Exit fullscreen mode

The issue was that __root.jsx is still a crucial file. It’s required by the @tanstack/router-plugin/vite plugin to generate the routeTree.gen.ts file, which is then imported and initialized in the app’s entry point (/src/main.jsx in my case).

Here’s my /src/main.jsx:
/src/main.jsx :

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";

import { RouterProvider, createRouter } from "@tanstack/react-router";

import { routeTree } from "./routeTree.gen"; // <-  HERE
const router = createRouter({ routeTree });

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <RouterProvider router={router} /> 
  </StrictMode>
);
Enter fullscreen mode Exit fullscreen mode

So, your solution works perfectly, but it just needs this small additional file: /src/routes/__root.jsx

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

export const Route = createRootRoute({
  component: RootComponent,
});

function RootComponent() {
  return <Outlet />;
}
Enter fullscreen mode Exit fullscreen mode

Thank you so much, I appreciate your help.

Collapse
 
jhaemin profile image
Jang Haemin •

Yeah I forgot the __root.tsx sorry. It is required.

Collapse
 
salehmotiwala profile image
Saleh Motiwala •

Thanks mate. Been stuck on this for hours. You're a legend.