Reactjs 如何在nextjs中导航而不丢失header组件的状态

有没有办法在不丢失标题组件状态的情况下创建/构造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

从“react”导入{useState}
从“下一个/链接”导入链接
导出常量头=（）=>{
const[value，setValue]=useState（1）
返回(
标题
设置值（值+1）}>
{value}




)
}
导出默认标题

有一个简单的方法

我有两页。 索引：

const Home=（）=>(
指数
)

测试：

从“下一个/头部”导入头部
从“../components/Header”导入标题
常量Home=（）=>(
试验
)
导出默认主页

---

我希望在不丢失stateiheader组件的情况下在此页面之间导航。这是可能的，如何实现？

您可以做的一件事是将整个Next.js应用程序包装在一个布局组件中，其中包括

。查看我创建的这个沙盒，了解如何将此模式应用于问题中的示例：

查看这篇伟大的文章，它解释了这种模式以及在Next.js中持久化布局的一些其他解决方案：

const Home = () => (
  <div className="container">
    <Header />
    <main>
      Index
    </main>
  </div>
)

import Head from 'next/head'
import Header from '../components/header'

const Home = () => (
  <div className="container">
    <Header />
    <main>
      Test
    </main>
  </div>
)

export default Home