如何使用 Next.js 仅将某些页面包装在 Context Provider 中？

Question

我想在三个页面之间共享数据（这些是 Web 应用程序的核心），但我也有一堆不关心这些数据的博客页面。我看过的所有地方都建议将 Provider 放在_app.tsx文件中。如果我对MyApp提供者的理解正确，如果有人直接访问www.myurl.com/blog/my-blog-1（来自 google），这将导致提供者运行其功能；即使该页面不会调用 useContext

如何只在 Provider 中包装三页而忽略博客页面？

例如：

• www.myurl.com -> 我希望它使用来自提供商的共享数据
• www.myurl.com/my-functionality -> 我希望它使用来自提供商的共享数据
• www.myurl.com/profile->我希望它使用来自提供商的共享数据
• www.myurl.com/blog/ * -> 我不希望它调用身份验证提供程序中的函数

这是我的_app.tsx样子：

import { AppProps } from 'next/app'
import '../styles/index.css'

export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

Answer 1

虽然有点晚了，但实际上有一种官方方法可以做到这一点：使用每页布局。首先稍微调整一下你的_app.tsx文件：

import type { ReactElement, ReactNode } from 'react';
import { AppProps } from 'next/app';
import type { NextPage } from 'next';

type NextPageWithLayout = NextPage & {
    getLayout?: (page: ReactElement) => ReactNode;
};

type AppPropsWithLayout = AppProps & {
    Component: NextPageWithLayout;
};
export const App = ({ Component, pageProps }: AppPropsWithLayout): unknown => {

    // Use the custom layout defined at the page level, if available
    const getLayout = Component.getLayout ?? ((page) => page);

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

然后在 Page 组件中写入以下内容：

// DashboardPage.ts that need to have a UserProvider and CompanyProvider
import Layout from '@components/Layout'; // Default Layout that is imported for all the page
import { ReactElement } from 'react';
import { UserProvider } from '@contexts/user';
import { CompanyProvider } from '@contexts/company';

const DashboardPage = (): JSX.Element => {
    return <DashboardContainer />;
};

// Custom Layout to wrap the page within the User and company providers
DashboardPage.getLayout = function getLayout(page: ReactElement) {
    return (
        <Layout title="Dashboard page">
            <UserProvider>
                <CompanyProvider>{page}</CompanyProvider>
            </UserProvider>
        </Layout>
    );
};

export default DashboardPage;

Answer 2

嗯，这是一个有趣的问题。

挑战在于 Next 实现基于文件的路由的方式。由于无法为页面组创建包装器，因此您唯一能做的就是将应用程序包装在上下文提供程序中。但这并不能真正解决你的问题。

SOOO...我认为有一个解决方法。如果您希望能够在上下文提供程序中包装特定的一组页面，首先，您需要将基于文件的路由器替换为react-router。

Andrea Carraro 有一篇关于这个主题的非常有趣的文章。我认为你应该尝试一下： https ://dev.to/toomuchdesign/next-js-react-router-2kl8

我也会尝试寻找另一种解决方案，但请告诉我这对您有用吗？