Next.js Discord

Discord Forum

I want to know how should render this without reloading the site

Unanswered
Kintamani posted this in #help-forum
Open in Discord
KintamaniOP
This is a tab . Inside setting tab theres a navigation when we click it page load inside that tabbody what the approch I should take. I have put the file structure too inside app

24 Replies

@Kintamani This is a tab . Inside setting tab theres a navigation when we click it page load inside that tabbody what the approch I should take. I have put the file structure too inside app
Ray
hi, I would use nested layout for this by creating a layout.tsx inside project-areas/[slug] and render the tab menu there like this
export default function Layout({children}) {
  return (
     <>
       <TabMenu />
       {children}
     </>
  )
}
KintamaniOP
but inside bench have some more pages
and survey
Ray
yes, they will be rendered in the children props
KintamaniOP
but i donr want them inside that tab it should a different page bro that wil have different tabs
KintamaniOP
url of the website?
@Kintamani url of the website?
Ray
for the page in the your question
KintamaniOP
/admin/projects-area/[slug]/
will show the tabs
KintamaniOP
when clicking settings /admin/projects-area/[slug]/setting
KintamaniOP
/admin/projects-area/[slug]/bench/[year]/report is a another page
Ray
oh I didn't see this page
KintamaniOP
thats the problem there
Ray
create a route group /admin/projects-area/[slug]/(tab)
and create the layout.tsx in /admin/projects-area/[slug]/(tab)/layout.tsx
then move
/admin/projects-area/[slug]/settings
/admin/projects-area/[slug]/benchmark
/admin/projects-area/[slug]/survey to it
KintamaniOP
ok I'll try it and let u know
thanks a lot bro
u saved my day
@Kintamani thanks a lot bro
Ray
no prob 😆