next.js 如何在多个布局中使用上下文管理全局状态

Question

我根据每个页面布局结构在 next.js 中使用了两种布局。

未验证页面的一种布局
另一个用于认证页面

在_app.js

import GlobalContext from "../utils/GlobalContext";
....
return getLayout(
    <Layout>
      <Component {...pageProps} />
    </Layout>
);

页数

Login.getLayout = function getLayout(page) {
    return (
        <Layout2>
            {page}
        </Layout2>
    )
}

访问具有不同布局的页面时，全局状态似乎被重置。

问题是如何通过多个布局上的上下文保持全局状态共享？

Answer 1

不确定两个完全独立的共享布局是否有优点，但会尝试解决您的问题。我会创建一个共享 context 和单一布局工厂，returns 相关布局基于您的规则，即用户存在等

在 _app.js:

的上下文中包装布局

function MyApp({ Component, pageProps, router }: MyAppProps) {
  return (
    <UserProvider>
      <Layout>
        <Component {...pageProps} key={router.asPath} />
      </Layout>
    </UserProvider>
  );
}

然后在布局中访问上下文并呈现适当的选项：

// context
import { useUser } from '../utils/user';

import Header from './header';
import AuthenticatedHeader from './header/authenticated';

interface LayoutProps {
  children: any;
}

const DefaultLayout = ({ children }: LayoutProps) => {
  return (
    <>
      <Header />
      {children}
    </>
  );
};

const AuthLayout = ({ children }: LayoutProps) => {
  return (
    <>
      <AuthenticatedHeader />
      {children}
    </>
  );
};

const Layout = ({ children }: LayoutProps) => {
  const { user } = useUser();

  return (
    <>
      {/* conditionally render appropriate  */}
      {user ? <AuthLayout>{children}</AuthLayout> : <DefaultLayout>{children}</DefaultLayout>}
    </>
  );
};

export default Layout;

Codesandbox

Answer 2

要共享在多个模板之间共享的全局状态，我们需要按如下方式包装 getLayout 本身

在_app.js

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

next.js 如何在多个布局中使用上下文管理全局状态

next.js how to manage global state with context in across multiple layouts

global-state

next.js