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

Question

我想在三个页面之间共享数据（这些是网络应用程序的核心），但我也有一堆不关心这些数据的博客页面。我看过的任何地方都建议将 Provider 放在 _app.tsx 文件中。如果我理解正确，如果我将MyApp 与提供者包装在一起，如果有人直接访问www.myurl.com/blog/my-blog-1（来自谷歌），那将导致提供者运行其功能；即使该页面不会调用 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

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

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

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

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

我也会尝试寻找其他解决方案，但请告诉我这对您有用吗。

Answer 2

我对 Next.js 很陌生，正在寻找同样的问题。 也许我们可以只使用useRouter钩子中的pathname和query，并在我们的Contexts或自定义_app中尝试一些条件

next/router

Answer 3

有一种解决方法可以使用没有 react-router 的包装器来包装特定路径的组件。 看看这个视频： https://www.youtube.com/watch?v=69-mnojSa0M

该视频向您展示了如何使用嵌套布局包装子路径的组件。创建一个嵌套布局并使用 Context Provider 包装该布局。

Answer 4

聚会有点晚了，但实际上有一种官方方法可以做到这一点： 使用per page layout。 首先稍微调整一下你的_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} />);
};

然后在页面组件中编写以下内容：

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