NEXT JS - 如何防止重新安装布局? [英] NEXT JS - How to prevent layout get re-mounted?
问题描述
接下来尝试布局模式:
https://github.com/zeit/next.js/tree/canary/examples/layout-component
问题是布局组件在每次页面更改时都会重新安装.我需要使用布局组件作为容器,以便在每次安装时从服务器获取数据.如何防止重新安装布局?还是我在那里遗漏了什么?
And the problem is that Layout component get remounted on every page change. I need to use layout component as a Container so it'll fetch data from server on every mount. How can I prevent layout to get re-mounted? Or am I missing something there?
推荐答案
如果您将 Layout
组件放在页面组件中,它将在页面导航(页面切换)上重新安装.
If you put your Layout
component inside page component it will be re-remounted on page navigation (page switch).
您可以将您的页面组件与 _app.js
中的 Layout
组件一起包装起来,这样可以防止它重新安装.
You can wrap your page component with your Layout
component inside _app.js
, it should prevent it from re-mounting.
像这样:
// _app.js
import Layout from '../components/Layout';
class MyApp extends App {
static async getInitialProps(appContext) {
const appProps = await App.getInitialProps(appContext);
return {
...appProps,
};
}
render() {
const { Component, pageProps } = this.props;
return (
<Layout>
<Component {...pageProps} />
<Layout />
);
}
}
export default MyApp;
这篇关于NEXT JS - 如何防止重新安装布局?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!