问下一步JS -如何防止布局重新安装？

EN

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

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

import { createContext } from 'react'
export default createContext({})

import Config from '../Config'

export default function App({ Component, pageProps }) {
  return (
    <Config.Provider value={{ user: { name: 'John' }}}>
      <Component {...pageProps} />
    </Config.Provider>
  )
}

import { useContext } from 'react'
import Config from '../Config'

function Avatar() {
  const { user } = useContext(Config)
  return (
    <span>
      {user.name}
    </span>
  )
}

export default Avatar

  <Provider value={useState({})} />

  const [user, setUser] = useContext(Config)