Next.js Discord

Discord Forum

Tab Group example of Parallel Routes

Unanswered
renee posted this in #help-forum
Open in Discord
reneeOP
According to the Tab Group example of Parallel Routes, what are the differences in usage between Parallel Routes and Route Groups?
https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#tab-groups

like the differences between app/dashboard/(analytics)/layout.tsx and app/dashboard/@analytics/layout.tsx these two file with the example code

import Link from 'next/link'
 
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <nav>
        <Link href="/dashboard/page-views">Page Views</Link>
        <Link href="/dashboard/visitors">Visitors</Link>
      </nav>
      <div>{children}</div>
    </>
  )
}

9 Replies

Nebelung
i'd also like to know
it will render the child page of @analytics, such as @analytics/detail/page.tsx
if you make it with route groups -> that means you are making 2 different kinds of layout for /page-views and /visitors
.
whereas if you make with parallel routes, you can have a common layout at @analytics/layout.js (or you can put it in /layout.js) then the children of that "slot" will depends on the server route taken.
.
unlike parallel routes where you have to copy and paste that 'common layout' at /page-views and /visitors
.
Route groups is used to create different root layouts
while
Parallel routes is used to create "slots" inside your /layout.js where you can have multiple "children" in your layout.

This distinction is important since route groups allows you to create completely different layouts and is mostly for organizational purposes
while
parallel routes allows you to create consistent layout within for every child page
consider this basic example:
return (
  <div className="p-2">
    <Tab />
    {tabGroup}
  </div>
  <div>
    {children}
  </div>
)