reactjs 错误:[next-auth]:`useSession`必须 Package 在< SessionProvider />

waxmsbnn  于 2023-05-17  发布在  React
关注(0)|答案(1)|浏览(151)

我得到下面的错误,当我加载我的个人资料页。页面在浏览器中加载正常,但我在终端中得到此错误。
Error: [next-auth]:useSessionmust be wrapped in a <SessionProvider />
所有子级都使用SessionProvider Package 。
下面是我的layout.jsx文件。

import Provider from './components/Provider'
import Nav from './components/Nav'

import './globals.css'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

const RootLayout = ({ children }) => {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Provider>
          <div className="main">
            <div className="gradient" />
          </div>

          <main className="app">
            <Nav />
            {children}
          </main>
        </Provider>
      </body>
    </html>
  )
}

export default RootLayout

下面是我的Provider.jsx组件。

'use client'

import { SessionProvider } from 'next-auth/react'

const Provider = ({ children }) => {
  return <SessionProvider>{children}</SessionProvider>
}

export default Provider

下面是ProfilePage的page.jsx

'use client'

import { useSession } from 'next-auth/react'

const ProfilePage = () => {
  const { data: session } = useSession({
    required: true,
  })

  return (
    <section>
      <h1 className="head_text text-center">Profile</h1>
      <p>You are logged in as, {session?.user?.email}</p>
    </section>
  )
}

export default ProfilePage

任何帮助都很感激。
谢谢大家。

h22fl7wq

h22fl7wq1#

我可以通过清除.next文件夹缓存来解决这个问题。

相关问题