如何仅使用Next.js在上下文提供程序中包装一些页面？

编程问答 2022-06-03

问题描述

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

如何仅在提供程序中包装三个页面，而忽略博客页面？

例如：

这是我的_app.tsx的样子：

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

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

解决方法

好吧，这是一个有趣的问题。

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

SOOO ...我认为有一种解决方法。如果要能够在上下文提供程序中包装某些页面组，则首先需要用react-router替换基于文件的路由器。

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

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

,

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

中尝试一些条件

next/router

react-hooksreactjsreactjsreactjsreactjsuse-context