Next.js Discord

Discord Forum

Strategizing Consistency: Integrating <BackButton/> Across Routes in Admin Panel Layouts

Answered
Giant panda posted this in #help-forum
Open in Discord
Giant pandaOP
I'm making use of the next 14 app router.

Within my admin panel, I've crafted a header housing various components like the "back button," alongside the page title and additional elements, neatly arranged within the same row.

However, I've encountered a challenge. To maintain consistency across all routes, I aim to include the <BackButton/> component in each one. Ideally, I'd like to integrate it into the layout.tsx file. However, this presents an issue as layout.tsx isn't designed to accommodate multiple children. Furthermore, if I place the children within a row, I risk obscuring the main content.

What would be the most effective strategy to resolve this predicament?
Answered by Ray
'use client'

export function Header({children}) {
  const pathname = usePathname();
  const router = useRouter()

  
  return (
    <>
        <BackButton />
        {children}
    </>
  )
}

// page.tsx

export default function Page() {
  return (
    ...
    <Header>
      <Title/>
      <SomeFloatRightComponentsWhichisUniqueInEveryRoute />
    </Header>
  )
}

you could render SomeFloatRightComponentsWhichisUniqueInEveryRoute and Title through the children props
View full answer

24 Replies

Western paper wasp
What do you mean layout.tsx isn’t designed to accommodate multiple children?
Can’t you do 

export default function Layout({ children }) {
  return (
    <>
      <Header />
      {children}
    </>
  );
}
Brown bear
There is a long time issue where we cannot get the pathname on a layout component.
https://github.com/vercel/next.js/issues/43704

Technically, you can put stuff into the headers to retrieve the path, but I think it will make the whole route dynamic render, if you try to read the headers.

The best I can think of is:

For the content, continue to use the children to the layout.
For the navbar dynamic component, if you can afford it to be a client component, can use usePathbname to detect the route and change the component accordingly.
Brown bear
It will become client side if you try to read the header
Ray
how?
Brown bear
Sorry not client side rendering but dynamic rendering, means SSR and not static
Ray
and useLocation is from react-router-dom or remix
:lolsob:
Brown bear
Sorry use usepathname
Ray
please edit your message to prevent confusion for OP👍🏾
@Western paper wasp Can’t you do tsx export default function Layout({ children }) { return ( <> <Header /> {children} </> ); }
Giant pandaOP
but that <Header/> only back button is fixed, rest of the items in like right side section, is different for every route
so it wont work
@Giant panda but that <Header/> only back button is fixed, rest of the items in like right side section, is different for every route
Ray
you could mark <Header /> as client component and use usePathname() hook to check the path and render the ui you want
@Ray you could mark <Header /> as client component and use `usePathname()` hook to check the path and render the ui you want
Giant pandaOP
lets suppose header is a flex,

it has 4childrend

function Header(){

return #Unknown Channel
<BackBUtton/>
<Title/>


<SomeFloatRightComponentsWhichisUniqueInEveryRoute/>
</>
now if i put this header in layout, SomeFloatRightComponentsWhichisUniqueInEveryRoute will be always constant
but i will SomeFloatRightComponentsWhichisUniqueInEveryRoute to set from page.tsx
@Giant panda lets suppose header is a flex, it has 4childrend function Header(){ return <> <BackBUtton/> <Title/> <SomeFloatRightComponentsWhichisUniqueInEveryRoute/> </>
Ray
'use client'

export function Header({children}) {
  const pathname = usePathname();
  const router = useRouter()

  
  return (
    <>
        <BackButton />
        {children}
    </>
  )
}

// page.tsx

export default function Page() {
  return (
    ...
    <Header>
      <Title/>
      <SomeFloatRightComponentsWhichisUniqueInEveryRoute />
    </Header>
  )
}

you could render SomeFloatRightComponentsWhichisUniqueInEveryRoute and Title through the children props
Answer
Giant pandaOP
oh yes
this make sense
Thanks!
Ray
np