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

Question

我想在三个页面之间共享数据(这些是 Web 应用程序的核心)，但我也有一堆不关心这些数据的博客页面。我看过的所有地方都建议将 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
我也会尝试找到另一个解决方案，但让我知道这对你有用。