Next js如何避免在路由页面之间重新呈现公共组件

Question

我已经在Next js中设置了基本路由器，我希望多个页面共享一个组件，例如一个标头。共享组件在每次新页面加载时都会重新加载。(如何(我可以重用组件，而不必在页面加载之间重新渲染它们？与CRA+Areact路由器嵌套路由相比，这确实效率低下，因为它消除了对任何形式共享组件的要求。

Sandox在这里

共享组件代码如下：

import React, { memo } from "react";
export default function hello() {}
export const Header = memo(() => {
return (
<>
<h1>Next js Shared component</h1>
<p>{Math.random()}</p>
</>
);
});

我试过在备忘录中包装一个通用组件，以避免重新发送，但这不起作用。有没有一种方法可以在NextJS中的页面之间共享组件？

Answer 1

您可以将共享组件(如Header(放置在_app.js中，并从其他组件中删除，如下所示：

// /pages/_app_.js
import React from "react";
import { Wrapper, Header } from "../common";
const MyApp = ({ Component, pageProps }) => {
return (
<>
<Wrapper>
<Header/>
<Component {...pageProps} />
</Wrapper>
</>
);
};
export default MyApp;