我可以在 Next.js 应用程序的根布局中使用客户端组件（导航栏）吗？

Question

我正在使用 Next.js，并且我的应用程序路由器中有一个根布局文件。但是，我在

<Nav/>

组件中遇到错误，因为它使用状态来跟踪移动导航是否打开。

错误提示：

您正在导入一个需要 useState 的组件。它仅在客户端组件中工作，但其父组件都没有标记为“使用客户端”，因此默认情况下它们是服务器组件。

在我的根

layout.js

文件中：

import Footer from './components/footer';
import Hero from './components/hero';
import Nav from './components/nav';
import "../styles/globals.css"

export default function Layout({ children }) {

  return (
    <html lang="en">
      <Nav />
      <Hero />
      <main className='bg-white'> 
          {children}
      </main>
      <Footer />    
    </html>

  )
}

我尝试将“使用客户端”添加到我的

<Nav/>

组件的顶部，但它禁用了组件中的所有事件处理程序和状态，使其在移动设备上毫无用处。我不清楚客户端和服务器组件之间的工作关系，或者事件处理程序在这种情况下应该如何工作。

有没有办法解决这个错误，同时保持导航在根布局中的位置并保持其交互性？

Answer 1

0
投票

将

'use client'

添加到您的主要组件

我可以在 Next.js 应用程序的根布局中使用客户端组件（导航栏）吗？

问题描述投票：0回答：1

1个回答

最新问题

我可以在 Next.js 应用程序的根布局中使用客户端组件（导航栏）吗？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1