Next.js中使用HOC实现Persistent Layouts的兼容问题求解

Next.js 持久化布局的核心逻辑是在根组件_app.js层面调用页面组件的静态getLayout方法，只有所有页面共享同一个getLayout返回的 Layout 组件实例，才能避免重渲染。你之前的写法存在两个问题：

• HOC 包裹原页面组件后，没有透传原组件挂载的getLayout静态方法，导致_app.js识别不到持久化布局逻辑
• 直接在 HOC 的 render 方法内创建<Layout>实例，相当于每次页面渲染都会生成全新的 Layout，自然无法保留状态实现持久化

1. 确认_app.js支持持久化布局 #

首先保证项目根组件配置了标准的持久化布局调用逻辑：

// pages/_app.js
import Layout from '@components/layouts/app/Layout'

export default function MyApp({ Component, pageProps }) {
  // 优先使用页面自定义的getLayout，没有则走全局默认布局
  const getLayout = Component.getLayout || ((page) => <Layout>{page}</Layout>)
  return getLayout(<Component {...pageProps} />)
}

2. 修改鉴权HOC逻辑 #

修改AuthenticationRoute.js，核心是透传原组件的静态属性，不在HOC内部处理Layout包裹：

import { Component } from 'react';
import Router from 'next/router';
// 用于透传原组件所有静态属性，Next.js项目默认已集成，没有可执行npm i hoist-non-react-statics安装
import hoistNonReactStatics from 'hoist-non-react-statics';

const authenticatedRoute = (Component = null, options = {}) => {
  class AuthenticatedRoute extends Component {
    state = {
      loading: true,
    };

    componentDidMount() {
      const isSignedIn = true;
      if (isSignedIn) {
        this.setState({ loading: false });
      } else {
        Router.push(options.pathAfterFailure || '/sign_in');
      }
    }

    render() {
      const { loading } = this.state;
      if (loading) {
        return <div />;
      }
      // 直接返回原组件，布局逻辑交给_app层统一处理
      return <Component {...this.props} />;
    }
  }

  // 关键：将原组件的所有静态属性（包括getLayout）透传到HOC返回的新组件上
  hoistNonReactStatics(AuthenticatedRoute, Component);

  // 若需要给所有使用该鉴权HOC的页面统一设置布局，可直接在此挂载getLayout，优先级高于原页面配置
  // AuthenticatedRoute.getLayout = (page) => <Layout>{page}</Layout>;

  return AuthenticatedRoute;
};

export default authenticatedRoute;

如果不想引入额外依赖，也可以手动透传getLayout属性，替换上述hoistNonReactStatics调用即可：

if (Component.getLayout) {
  AuthenticatedRoute.getLayout = Component.getLayout;
}

3. 页面组件用法保持不变 #

import authenticatedRoute from '@components/auth/AuthenticatedRoute';
import Layout from '@components/layouts/app/Layout';

const App = () => {
  return (
    <section>
      <h1>Logged In</h1>
      <h1>App</h1>
    </section>
  );
};

// 页面需要自定义布局时添加即可，不需要则走_app的全局默认布局
App.getLayout = (page) => <Layout>{page}</Layout>;

export default authenticatedRoute(App);

内容的提问来源于stack exchange，提问作者Gnusson