有没有什么方法可以创建/构建 next.js 应用程序进行导航而不丢失标头组件状态?
让我解释。
我有这样的标题组件:
import { useState } from "react"
import Link from 'next/link'
export const Header = () => {
const [value, setValue] = useState(1)
return (
<header>
HEADER
<button onClick={() => setValue(value + 1)}>
{value}
</button>
<ul>
<li>
<Link href="/">
<a>Home</a>
</Link>
</li>
<li>
<Link href="/test">
<a>About Us</a>
</Link>
</li>
</ul>
</header>
)
}
export default Header
有一个简单的柜台。
我有两页。
指数:
const Home = () => (
<div className="container">
<Header />
<main>
Index
</main>
</div>
)
Test:
import Head from 'next/head'
import Header from '../components/header'
const Home = () => (
<div className="container">
<Header />
<main>
Test
</main>
</div>
)
export default Home
我想在这个页面之间导航而不丢失标题组件的状态。有可能吗?如何实现?
您可以做的一件事是将整个 Next.js 应用程序包装在一个布局组件中,其中包括<Header/>
。查看我创建的这个沙箱,看看如何将此模式应用于您问题中的示例:
https://codesandbox.io/s/so-q-63755826-b-forked-7xt6u
查看这篇精彩的文章,它解释了这种模式以及 Next.js 中持久布局的一些其他解决方案:
https://adamwathan.me/2019/10/17/persistent-layout-patterns-in-nextjs/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)