T
TanStackā€¢10mo ago
other-emerald

About route groups/layouts with different wrapper layouts

Hey Router people! I am currently experimenting with converting a Next.js project that has the following routing (example): Grouped under (main) and has its own layout.tsx in the Next.js world. Let's say this layout renders a header - / - /about Grouped under (cv) and has its own layout.tsx - /$locale/cv Basically, the first group of routes should share one layout, or even root(?): 
__root.tsx
(main)/
  some-type-of-root-or-layout-that-renders-<Outlet />.tsx
  index.tsx
  about.tsx
(cv)/
  some-type-of-root-or-layout-that-renders-<Outlet />.tsx
  $locale.cv.tsx
__root.tsx
(main)/
  some-type-of-root-or-layout-that-renders-<Outlet />.tsx
  index.tsx
  about.tsx
(cv)/
  some-type-of-root-or-layout-that-renders-<Outlet />.tsx
  $locale.cv.tsx
How could I go about implementing this in TanStack Router?
14 Replies
other-emerald
other-emeraldOPā€¢10mo ago
Bump I've just about anything I could come up with. I'm left assuming this is not possible with TanStack Router at the moment, which is a shame
optimistic-gold
optimistic-goldā€¢10mo ago
Are you just asking to convert nextjs route groups (https://nextjs.org/docs/app/building-your-application/routing/route-groups) to router? If so you can use a pathless route to create a shared layout: https://tanstack.com/router/v1/docs/framework/react/guide/routing-concepts#pathless-routes
Routing: Route Groups | Next.js
Route Groups can be used to partition your Next.js application into different sections.
Routing Concepts | TanStack Router React Docs
TanStack Router supports a number of powerful routing concepts that allow you to build complex and dynamic routing systems with ease. Each of these concepts is useful and powerful, and we'll dive into...
like-gold
like-goldā€¢10mo ago
something like this should work: šŸ“ routes šŸ“ main šŸ“„ _main-layout.tsx šŸ“ _main-layout šŸ“„ _main-layout.tsx šŸ“„ index.tsx šŸ“ cv šŸ“„ _cv-layout.tsx šŸ“ _cv-layout šŸ“„ _cv-layout.tsx šŸ“„ index.tsx _main-layout 
export const Route = createFileRoute("/main/_main-layout")({
  component: RouteComponent,
});

function RouteComponent() {
  const components = {
    em: (props: any) => <i {...props} />,
  };
  return (
    <div>
      <MainSidebar />      
      <Outlet />
    </div>
  );
}
export const Route = createFileRoute("/main/_main-layout")({
  component: RouteComponent,
});

function RouteComponent() {
  const components = {
    em: (props: any) => <i {...props} />,
  };
  return (
    <div>
      <MainSidebar />      
      <Outlet />
    </div>
  );
}
_cv-layout 
export const Route = createFileRoute("/cv/_cv-layout")({
  component: RouteComponent,
});

function RouteComponent() {
  const components = {
    em: (props: any) => <i {...props} />,
  };
  return (
    <div>
      <CvSidebar />      
      <Outlet />
    </div>
  );
}
export const Route = createFileRoute("/cv/_cv-layout")({
  component: RouteComponent,
});

function RouteComponent() {
  const components = {
    em: (props: any) => <i {...props} />,
  };
  return (
    <div>
      <CvSidebar />      
      <Outlet />
    </div>
  );
}
note the _ on the layouts which are important syntax fwiw there are a few valid syntaxes for layouts, but this was the one i was able to get working
other-emerald
other-emeraldOPā€¢10mo ago
Thanks, but that would add /main to the URL path, no? I basically want: Under one layout: - example.com - example.com/about - example.com/something Under another layout - example.com/cv (redirect to locale route) - example.com/en/cv
other-emerald
other-emeraldOPā€¢10mo ago
Actually no, but the _main/cv-layout.tsx files do not render at all with the following:
No description
other-emerald
other-emeraldOPā€¢10mo ago
I got this layout to work for me
No description
other-emerald
other-emeraldOPā€¢10mo ago
I needed to add the layout name to each individual route, which feels wrong
other-emerald
other-emeraldOPā€¢10mo ago
I tried this simplified version, but this doesn't catch _main.index.tsx
No description
other-emerald
other-emeraldOPā€¢10mo ago
Is this the least amount of files/folders needed to achieve this:
No description
optimistic-gold
optimistic-goldā€¢10mo ago
I believe you could also use route.tsx (https://tanstack.com/router/latest/docs/framework/react/guide/file-based-routing#file-naming-conventions) files instead of duplicating the prefix inside the folder. Something like this I believe should work: You can also configure the route.tsx in options if you'd prefer to call it something else. To avoid duplication you could also use the same file name as the folder at the same level 
__root.tsx
_main/
  route.tsx -> Render layout here and <Outlet />
  index.tsx -> This could be the true index route & example.com/
  about.tsx -> example.com/about
_cv/
  route.tsx -> Render layout here and <Outlet />
  $locale.cv.tsx -> example.com/en/cv
  cv.tsx -> example.com/cv (For your redirect)
  Note don't add an index.tsx directly here or it will clash with the _main one.
__root.tsx
_main/
  route.tsx -> Render layout here and <Outlet />
  index.tsx -> This could be the true index route & example.com/
  about.tsx -> example.com/about
_cv/
  route.tsx -> Render layout here and <Outlet />
  $locale.cv.tsx -> example.com/en/cv
  cv.tsx -> example.com/cv (For your redirect)
  Note don't add an index.tsx directly here or it will clash with the _main one.
Or: 
__root.tsx
_main.tsx -> Render layout here and <Outlet />
_main/
  index.tsx -> This could be the true index route & example.com/
  about.tsx -> example.com/about
_cv.tsx -> Render layout here and <Outlet />
_cv/
  $locale.cv.tsx -> example.com/en/cv
  cv.tsx -> example.com/cv (For your redirect)
  Note don't add an index.tsx directly here or it will clash with the _main one.
__root.tsx
_main.tsx -> Render layout here and <Outlet />
_main/
  index.tsx -> This could be the true index route & example.com/
  about.tsx -> example.com/about
_cv.tsx -> Render layout here and <Outlet />
_cv/
  $locale.cv.tsx -> example.com/en/cv
  cv.tsx -> example.com/cv (For your redirect)
  Note don't add an index.tsx directly here or it will clash with the _main one.
File-Based Routing | TanStack Router React Docs
Most of the TanStack Router documentation is written for file-based routing and is intended to help you understand in more detail how to configure file-based routing and the technical details behind h...
other-emerald
other-emeraldOPā€¢10mo ago
Oh, I like the route.tsx solution. That will work nicely I think Thank you both
optimistic-gold
optimistic-goldā€¢10mo ago
_main-layout.tsx must be next to the _main-layout folder, NOT inside
other-emerald
other-emeraldOPā€¢10mo ago
Gotcha
like-gold
like-goldā€¢10mo ago
_main-layout.tsx must be next to the _main-layout folder, NOT inside
ugh yeah this sorry important typo glad you got it!

Did you find this page helpful?