NEXT JS - 如何防止重新安装布局？

Question

接下来尝试布局模式：

https://github.com/zeit/next.js/tree/canary/examples/layout-component

问题是布局组件在每次页面更改时都会重新安装。我需要使用布局组件作为容器，以便在每次安装时从服务器获取数据。如何防止重新安装布局？或者我在那里错过了什么？

Answer 1

这有助于我进行持久布局。作者将一个函数放在一起，该函数将您的页面组件包装在您的 Layout 组件中，然后将该 fetch 函数传递给您的 _app.js。这样 _app.js 实际上是呈现布局的组件，但您可以指定哪些页面使用哪种布局（如果您有多个布局）。

因此，您可以灵活地在整个站点中使用多个布局，但那些共享相同布局的页面实际上将共享相同的布局组件，并且不必在导航上重新安装。

这是Next.js 中的持久布局模式完整文章的链接

以下是重要的代码片段。一个页面，然后是 _app.js

// /pages/account-settings/basic-information.js
import SiteLayout from '../../components/SiteLayout'
import AccountSettingsLayout from '../../components/AccountSettingsLayout'

const AccountSettingsBasicInformation = () => (
  <div>{/* ... */}</div>
)

AccountSettingsBasicInformation.getLayout = page => (
  <SiteLayout>
    <AccountSettingsLayout>{page}</AccountSettingsLayout>
  </SiteLayout>
)

export default AccountSettingsBasicInformation

// /pages/_app.js
import React from 'react'
import App from 'next/app'

class MyApp extends App {
  render() {
    const { Component, pageProps, router } = this.props

    const getLayout = Component.getLayout || (page => page)

    return getLayout(<Component {...pageProps}></Component>)
  }
}

export default MyApp

Answer 2

如果您将Layout组件放在页面组件中，它将在页面导航（页面切换）上重新安装。

您可以将您的页面组件与您的Layout组件包裹在里面_app.js，它应该可以防止它重新安装。

像这样的东西：

// _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;