英文:
Nestjs 13 custom layout didn't show up
问题
我使用 NextJs 13 构建我的项目。
<br>
我想将 CustomLayout 作为整个网站的布局。
<br>
不再有错误，但 CustomLayout 没有显示出来。
<br>
但它只显示 `<Home/>` 页面。
<br>
如何让用户在 CustomLayout 中点击菜单，它只会更改 `{page}`？
英文:
I use NextJs 13 to build my project.
<br>
I want CustomLayout as the whole website's Layout.
<br>
There's no error anymore but CustomLayout doesn't show up.
<br>
But it only show <Home/> page.
<br>
How can let user click menu in CustomLayout, and it will only change {page}?
app/CustomLayout.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>
)
}
app/page.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
得分: 1
以下是代码部分的翻译：
export default function RootLayout({ children }: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
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>
)
}
如果你需要更多翻译或有其他问题，请随时提问。
英文:
Next js 13 layout
The root layout is defined at the top level of the app directory and applies to all routes. This layout enables you to modify the initial HTML returned from the server.
>you can't add custom names like CustomLayout.tsx. The layout should be only names as layout.tsx/jsx
>Layouts should always pass down the children prop because of their nested structure
export default function RootLayout({ children }: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
Next js 13 layout documentation
Your Code Should Be Like This
app/layout.tsx
>! The root layout is defined at the top level of the app directory and applies to all routes. This layout enables you to modify the initial HTML returned from the server.
'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>
)
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论