如何在 nextjs 中导航而不丢失标题组件的状态 [英] How to navigate in nextjs without losing state of header component

问题描述

有什么方法可以在不丢失标题组件状态的情况下创建/构造 next.js 应用程序以进行导航?

Is there any way how to create/structure next.js app for navigation without losing header component state?

让我解释一下.

我有这样的标题组件:

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>
)

测试:

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

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

export default Home

我想在此页面之间导航而不会丢失状态 i 标题组件.有可能，怎么做?

I would like to navigate between this pages without losing state i header component. It is possible and how?

推荐答案

您可以做的一件事是将整个 Next.js 应用程序包装在一个布局组件中，该组件包括 <Header/>.查看我创建的这个沙箱，看看如何将此模式应用于您问题中的示例:

One thing you can do is to wrap your entire Next.js app in a layout component which includes the <Header/>. Check out this sandbox I created to see how this pattern can be applied to the example in your question:

https://codesandbox.io/s/so-q-63755826-b-forked-7xt6u

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

Check out this great article which explains this pattern as well as some other solutions for persisting layout in Next.js:

https://adamwathan.me/2019/10/17/persistent-layout-patterns-in-nextjs/

这篇关于如何在 nextjs 中导航而不丢失标题组件的状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！