[英]Next js: next auth provider + redux provider
In my Next js project, I have used Next auth, which import {Provider} from 'next-auth/client'
, and wrap the <Component />
in _app.js.在我的 Next js 项目中,我使用了 Next auth,它import {Provider} from 'next-auth/client'
,并将<Component />
包装在 _app.js 中。
However, at the same time, I want to add redux in the project.不过同时我想在项目中添加redux。 And it will import {Provider} from 'react-redux'
, and need to wrap the <Component />
in _app.js also.它会import {Provider} from 'react-redux'
,并且还需要将<Component />
包装在 _app.js 中。
So in this situation, they are using the same Provider
, I have tried import destructing, but it got me a synatx error Syntax error: ES2015 named imports do not destructure. Use another statement for destructuring after the import.
所以在这种情况下,他们使用相同的Provider
,我尝试了 import destructing,但它给了我一个 synatx error Syntax error: ES2015 named imports do not destructure. Use another statement for destructuring after the import.
Syntax error: ES2015 named imports do not destructure. Use another statement for destructuring after the import.
. . So how can I do?那我该怎么办?
import { Provider } from "next-auth/client";
function MyApp({ Component, pageProps }) {
return (
<>
<Provider
options={{
clientMaxAge: 0,
keepAlive: 0,
}}
session={pageProps.session}
>
<Component {...pageProps} />
</Provider>
</>
);
}
You can rename destructured imports.您可以重命名解构的导入。 So your code may look something like this:所以你的代码可能看起来像这样:
import { Provider } from "next-auth/client";
import { Provider as ReduxProvider } from "react-redux";
function MyApp({ Component, pageProps }) {
return (
<ReduxProvider {/* whatever props go here */}>
<Provider
options={{
clientMaxAge: 0,
keepAlive: 0,
}}
session={pageProps.session}
>
<Component {...pageProps} />
</Provider>
</>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.