有没有办法让一个文件夹中的所有页面在NextJS中共享一个容器?

我想它应该是这样的:

// pages/folder/index.js
export default function Container({ children }) {
    return <Container>{children}</Container>
}

// pages/folder/child.js
export default function Child() {
    return <Child />
}

推荐答案

我相信你要找的是Layouts美元.

// components/layout.js

import Navbar from './navbar'
import Footer from './footer'

export default function Layout({ children }) {
  return (
    <>
      <Navbar />
      <main>{children}</main>
      <Footer />
    </>
  )
}

Single Shared Layout with Custom App

// pages/_app.js

import Layout from '../components/layout'

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

Per-Page Layouts

// pages/index.js

import Layout from '../components/layout'
import NestedLayout from '../components/nested-layout'

export default function Page() {
  return (
    /** Your content */
  )
}

Page.getLayout = function getLayout(page) {
  return (
    <Layout>
      <NestedLayout>{page}</NestedLayout>
    </Layout>
  )
}
// pages/_app.js

export default function MyApp({ Component, pageProps }) {
  // Use the layout defined at the page level, if available
  const getLayout = Component.getLayout || ((page) => page)

  return getLayout(<Component {...pageProps} />)
}

Javascript相关问答推荐

禁用.js文件扩展名并从目录导入隐式根index.js时,找不到NodeJS导入模块

自定义确认组件未在vue.js的v菜单内打开

如何防止ionic 输入中的特殊字符.?

如果没有页面重新加载Angular ,innerHTML属性绑定不会更新

将基元传递给THEN处理程序

如何为仅有数据可用的点显示X轴标签?

通过跳过某些元素的对象进行映射

如何修复错误&语法错误:不能在纯react 项目中JEST引发的模块&之外使用导入语句?

AG-GRIDreact 显示布尔值而不是复选框

如何处理不带参数的redux thunk payloadCreator回调函数?

如何使用fltter_js将对象作为参数传递给javascrip?

KeyboardEvent:检测到键具有打印的表示形式

在此div中添加一个类,并在一段时间后在Java脚本中将其删除

每隔一行文本段落进行镜像(Boustrophedon)

错误400:当我试图在React中使用put方法时,该字段是必需的

如何在Java脚本中添加一个可以在另一个面板中垂直调整大小的面板?

动画可以在Chrome上运行,但不能在Safari上运行

Vue3合成API.来自本地存储的对象始终返回UNDEFINED

Zimjs库:如何让ZIM帧初始化日志(log)消失

SetTimeout和setInterval时间管理