Re-using navigation from parent components in NextJS

Viewed 35

I have this structure in my nextJS app:

pages
  projects
    index.tsx
    [projectId]
      visualizer
        index.tsx
      explorer
        index.tsx

The _app contains:

export default function MyApp({ Component, pageProps }: AppProps) {
...
  return (
    <StyledPage>
      <Header />
      <StyledWrapper>
        <Component {...pageProps} />
      </StyledWrapper>
    </StyledPage>
  )
}
is the global navigation

I need to have under /projects/..id../ a sub navigation which re-uses navigation from /projects/[id]/index.tsx.

So /visulizer/index.tsx and explorer/index.tsx will be opened from the tabs from /projects/[id]/index.tsx

enter image description here

On the top level (_app.tsx) I use <Component {..pageProps} /> I tried to use the same approach in /projects/[id]/index.tsx but it does not work there.

How can I implement sub components by re-using navigation from parent components in nextJS?

Thank you! :)

0 Answers
Related