next.js Nestjs 13自定义布局未显示

emeijp43 于 2023-03-18 发布在其他

关注(0)|答案(1)|浏览(164)

我使用NextJs 13来构建我的项目。
我想作为整个网站的布局自定义布局。
不再出现错误，但CustomLayout未显示。
但它只显示<Home/>页面。
如何让用户单击CustomLayout中的菜单，而它只会更改{page}？
应用程序/自定义布局.tsx

'use client'
import { useState, useRef, useEffect } from 'react'
import './globals.css'
import './index.scss'
import Menu from '@/app/components/Menu'
import PrelodingPage from '@/app/components/Preloading'
import Cursor from '@/app/components/cursor/CustomCursor'
import CursorManager from '@/app/components/cursor/CursorManager'

export default function Layout(props: any) {
  const [preloading, setPreloading] = useState<boolean>(true)
  const [menuToggle, setMenuToggle] = useState<boolean>(false)
  const intervalRef: { current: NodeJS.Timeout | null } = useRef(null)
  const clear = () => {
    clearInterval(intervalRef.current as NodeJS.Timeout)
  }

  useEffect(() => {
    const id = setInterval(() => {
      setPreloading(false)
    }, 3000)
    intervalRef.current = id
  }, [])

  useEffect(() => {
    if (!preloading) {
      clear()
    }
  }, [preloading])

  const classes = menuToggle ? 'menu-button active' : 'menu-button'

  return (
    <CursorManager>
      {preloading ? (
        <PrelodingPage />
      ) : (
        <div className='main'>
          <>
            <button
              className={classes}
              onClick={() => setMenuToggle(!menuToggle)}
            >
              <span className='bar'></span>
            </button>
            <Cursor />
            <Menu menuToggle={menuToggle} setMenuToggle={setMenuToggle} />
          </>
        </div>
      )}
    </CursorManager>
  )
}

应用程序/页面.tsx

import type { ReactElement } from 'react'
import Layout from './layout'
import CustomLayout from './CustomLayout'
import Home from './home/page'
import type { NextPageWithLayout } from './_app'

const Page: NextPageWithLayout = () => {
  return <Home />
}

Page.getLayout = function getLayout(page: ReactElement) {
  return (
    <Layout>
      <CustomLayout>{page}</CustomLayout>
    </Layout>
  )
}

export default Page

next.js

来源：https://stackoverflow.com/questions/75711391/nestjs-13-custom-layout-didnt-show-up

1条答案

按热度按时间

yb3bgrhw1#

下一步js 13布局

根布局在应用程序目录的顶层定义，并应用于所有路由。使用此布局可以修改从服务器返回的初始HTML。
不能添加CustomLayout.tsx之类的自定义名称。布局只能是layout.tsx/jsx之类的名称
由于布局的嵌套结构，因此布局应始终向下传递children prop

export default function RootLayout({ children }: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

下一个js 13布局documentation

您的代码应如下所示

app/layout.tsx
根布局在应用程序目录的顶层定义，并应用于所有路由。使用此布局可以修改从服务器返回的初始HTML。

'use client'
import { useState, useRef, useEffect } from 'react'
import './globals.css'
import './index.scss'
import Menu from '@/app/components/Menu'
import PrelodingPage from '@/app/components/Preloading'
import Cursor from '@/app/components/cursor/CustomCursor'
import CursorManager from '@/app/components/cursor/CursorManager'

export default function Layout({ children }: {
  children: React.ReactNode;
}) {
  const [preloading, setPreloading] = useState<boolean>(true)
  const [menuToggle, setMenuToggle] = useState<boolean>(false)
  const intervalRef: { current: NodeJS.Timeout | null } = useRef(null)
  const clear = () => {
    clearInterval(intervalRef.current as NodeJS.Timeout)
  }

  useEffect(() => {
    const id = setInterval(() => {
      setPreloading(false)
    }, 3000)
    intervalRef.current = id
  }, [])

  useEffect(() => {
    if (!preloading) {
      clear()
    }
  }, [preloading])

  const classes = menuToggle ? 'menu-button active' : 'menu-button'

  return (
    <CursorManager>
      {preloading ? (
        <PrelodingPage />
      ) : (
        <div className='main'>
          <>
            <button
              className={classes}
              onClick={() => setMenuToggle(!menuToggle)}
            >
              <span className='bar'></span>
            </button>
            <Cursor />
            <Menu menuToggle={menuToggle} setMenuToggle={setMenuToggle} />
          </>
        </div>
      ):
    {children}
    }
    </CursorManager>
  )
}

赞(0）回复(0）举报 2023-03-18

我来回答

next.js Nestjs 13自定义布局未显示

1条答案

下一步js 13布局

您的代码应如下所示

相关问题

热门标签

最新问答