Next.js双布局场景下如何在布局组件中使用Context？

问题原因 #

你当前的写法中，AuthContext.Provider是包裹在页面组件外层后，再作为参数传递给getLayout函数的。这意味着布局组件（比如Layout1）实际上是在Provider的父层级，不在Context的作用域范围内，所以布局组件自身调用useContext(AuthContext)会返回undefined；而页面组件作为布局的子元素，处于Provider内部，因此能正常访问Context值。

解决方案 #

将getLayout的调用放到AuthContext.Provider内部，让布局组件也处于Context的作用域中。修改_app.js代码如下：

import React, { useState } from "react";
import { AuthContext } from "../path/to/your/context"; // 替换为你的Context实际路径

function MyApp({ Component, pageProps }) {
  const getLayout = Component.getLayout || ((page) => page);
  const [state, setState] = useState('');

  return (
    <AuthContext.Provider value={{ state, setState }}>
      {getLayout(<Component {...pageProps} />)}
    </AuthContext.Provider>
  );
}

export default MyApp;

验证示例 #

修改后，在布局组件中即可正常使用Context：

import React, { useContext } from "react";
import { AuthContext } from "../path/to/your/context";

const Layout1 = ({ children }) => {
  const { state, setState } = useContext(AuthContext);

  return (
    <div>
      <div>布局内获取的状态：{state}</div>
      {children}
    </div>
  );
};

export default Layout1;

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