我使用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
1条答案
按热度按时间yb3bgrhw1#
下一步js 13布局
根布局在应用程序目录的顶层定义,并应用于所有路由。使用此布局可以修改从服务器返回的初始HTML。
不能添加
CustomLayout.tsx
之类的自定义名称。布局只能是layout.tsx/jsx
之类的名称由于布局的嵌套结构,因此布局应始终向下传递
children
prop下一个js 13布局
documentation
您的代码应如下所示
app/layout.tsx
根布局在应用程序目录的顶层定义,并应用于所有路由。使用此布局可以修改从服务器返回的初始HTML。