在多个提供程序中包装 _app.js (Next/React) [英] Wrapping _app.js within multiple providers (Next/React)
本文介绍了在多个提供程序中包装 _app.js (Next/React)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想知道是否有可能以及如何在 Redux 提供程序中包装我的顶级页面 _app.js
考虑到我已经使用 Next-auth 提供程序包装了它,例如:
I was wondering if it's possible and how to wrap my top level page _app.js
within Redux provider considered I already wrapped it with Next-auth provider like:
import React from "react"
import { Provider } from 'next-auth/client'
import '../public/global.scss'
export default function App ({ Component, pageProps }) {
return (
<Provider
options={{
clientMaxAge: 0,
keepAlive: 5 * 60
}}
session={pageProps.session} >
<Component {...pageProps} />
</Provider>
)
}
问题是,当我尝试添加 Reduct <Provider ..
时,它会显示Provider"已经定义.
The issue is that when I try to add also Reduct <Provider ..
it says "Provider" is already defined.
推荐答案
您可以使用 as
重命名名为 import 的 redux 提供程序.
You can rename the redux provider named import using as
.
import React from "react"
import { Provider as NextAuthProvider } from 'next-auth/client'
import { Provider as ReduxProvider } from 'react-redux'
import '../public/global.scss'
export default function App ({ Component, pageProps }) {
return (
<ReduxProvider>
<NextAuthProvider
options={{
clientMaxAge: 0,
keepAlive: 5 * 60
}}
session={pageProps.session} >
<Component {...pageProps} />
</NextAuthProvider>
</ReduxProvider>
)
}
这篇关于在多个提供程序中包装 _app.js (Next/React)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文