NextJS - 仅为几个特定页面添加提供程序答案

【问题标题】：NextJS - Add provider for only a few specific pagesNextJS - 仅为几个特定页面添加提供程序
【发布时间】：2021-07-03 20:30:07
【问题描述】：

我是否可以只为特定路由添加提供程序，而不是在下一个 js 中转到我的整个应用程序？

my "pages" folder

我的上下文文件 [server.jsx]

import { createContext, useState } from 'react';

const ServerContext = createContext({});

export const ServerProvider = ({ children }) => {
    const [ data, setData] = useState(null);
    
    return (
        <ServerContext.Provider value={{ data, setData }}>
            {children}
        </ServerContext.Provider>
    );
};

export default ServerContext;

我不想将其传递给整个应用程序，而是将其传递给我的仪表板路由

[_app.jsx]

import { Provider } from 'next-auth/client';
import { ThemeProvider } from 'styled-components';

import GlobalStyles from '@/styles/global';
import theme from '@/styles/theme';

import { ServerProvider } from '@/contexts/server';

function MyApp({ Component, pageProps }) 
{
    return (
        <ThemeProvider theme={theme}>
            <Provider session={pageProps.session} >
                <ServerProvider>
                    <Component {...pageProps} />
                    <GlobalStyles />
                </ServerProvider>
            </Provider>
        </ThemeProvider>
    );
}

export default MyApp;

【问题讨论】：

您使用路由作为pages 文件夹中的文件，对吗？我认为在那里你可以为你的页面创建一个包装器并使用上下文。
@JorgeKunrath，这对我来说看起来不错，你能解释一下吗？打扰了

标签： reactjs next.js react-context

【解决方案1】：

您可以使用pages 文件夹中的文件来包装您的路线。

如果是静态文件，该文件类似于pages/server/index.js。

例子：

import { ServerProvider } from "..."
import { ServerPageOrSomething } from "..."

export default function MyRoute({ ...props }) {
  return (
    <ServerProvider>
      // my components, like:
      <ServerPageOrSomething {...props} />
    </ServerProvider>
  )
}

//your Next stuff here
export async function getServerSideProps(props) {
// ...
  return {
    props: {
    //...
    },
  };
}

Next 的内容和...props 取决于您使用 Next 的目的。如果你不需要处理任何东西（获取数据等），你可以忽略它

【讨论】：