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屋！