如何将 _app.js 包装在多个提供程序中? [英] How to wrap _app.js within multiple providers?
本文介绍了如何将 _app.js 包装在多个提供程序中?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想知道这是否可能以及如何在 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>
)
}
问题是当我尝试添加 Redux <Provider ..
时,它说 Provider
已经定义.
The issue is that when I try to add also Redux <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 包装在多个提供程序中?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文