0

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

  • 未经身份验证页面的一种布局
  • 另一个用于经过身份验证的页面

在 _app.js 中

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

在页面中

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

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

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

4

2 回答 2

1

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

将布局包装在 _app.js 中的 Context 中：

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

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

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

代码沙盒

于 2021-09-22T19:40:10.837 回答
0

为了共享多个模板之间共享的全局状态，我们需要将 getLayout 本身包装起来，如下所示

在 _app.js 中

return (
    <Layout>
      {getLayout(<Component {...pageProps} />)}
    </Layout>
);
于 2021-09-24T04:41:04.770 回答