gpt4 book ai didi

reactjs - NextJS - 只为几个特定页面添加提供者

转载 作者:行者123 更新时间:2023-12-04 17:19:39 28 4
gpt4 key购买 nike

是否可以只为特定路由添加提供程序,而不是在下一个 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 文件夹中的文件来包装您的路线。

如果是静态文件,这个文件应该类似于 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 的目的。如果你不需要处理任何东西(获取数据等),你可以忽略它

关于reactjs - NextJS - 只为几个特定页面添加提供者,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66996039/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com