Javascript nextjs：页面之间的共享组件

我创建了一个非常简单的项目，有两个页面

这两个页面都包含一个基本布局组件：

// Page Component  

render() {
  return (
    <PageLayout>
      This is page A
    </PageLayout>
  );
}

//页面组件
render（）{
返回(
这是A页
);
}

页面布局如下所示：

// PageLayout

render() {
  return (
    <div>
      <Header />
      {this.props.children}
    </div>
  );
}

//页面布局
render（）{
返回(
{this.props.children}
);
}

因此，两个页面都使用

PageLayout

来呈现一个基本模板，该模板在两个页面上也包含相同的

标题

我的问题是，在两个页面之间导航时，会重新创建
标题
组件。我认为这不仅从性能的角度来看是不好的，而且因为在这种情况下，所有DOM节点和所有React组件都失去了它们的本地状态

因此，我想知道我是否缺少一些东西，或者我们如何在正确重用的页面之间创建共享组件（当然，至少在它们的状态没有改变的情况下）。
您有两个带有公共组件的页面：

// Page Component  

render() {
  return (
    <PageLayout>
      This is page A
    </PageLayout>
  );
}

第页A：

<A>
  <Common />
</A>

：

只要根元素有不同的类型，React就会被删除
老树，从头开始建新树。从
到
，或从
到
，或从
到
-任何
其中之一将导致全面重建

这就是为什么您会丢失公共（标头）组件中的状态。正如我在评论中所建议的，您必须使用诸如redux之类的外部状态。
我很确定您不能（根据我使用nextjs的经验）。如果您不想在标题中丢失状态，则需要将其存储在redux中。谢谢您的回答。然而，我的问题不仅与本地状态有关，还与DOM本身有关。例如，我的导航（在标题中）有一个CSS悬停转换，当在页面之间导航时，它总是被重置。现在我只是想知道，当我创建自己的设置时，是否可以解决这个问题。因为nextjs是服务器端呈现的，所以每次都会有完整的页面加载，所以不能这样做。使用客户端路由的普通应用程序（即CreateReact应用程序），您可以让路由器在布局中工作，以便始终存在相同的头。