Reactjs 在NextJS中重新使用父组件的导航

我的nextJS应用程序中有以下结构：

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

该应用程序包含：

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

导出默认函数MyApp（{Component，pageProps}:AppProps）{
...
返回(
)
}

是全球导航吗 我需要在/projects/.id../a子导航下重新使用/projects/[id]/index.tsx中的导航

因此/visualizer/index.tsx和explorer/index.tsx将从/projects/[id]/index.tsx的选项卡打开

在我使用的顶层（_app.tsx）中，我尝试在/projects/[id]/index.tsx中使用相同的方法，但在那里不起作用

如何通过在nextJS中重新使用父组件的导航来实现子组件

谢谢！：）