导航栏扩展按钮在主页上不起作用

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

感谢您的宝贵时间！

我正在创建一个响应式导航栏，作为 

/components/Header.js
中的组件并将其导入到 
/app/layout.js
中。但问题是，移动设备上展开菜单的按钮在 
/app/page.js
网页中不起作用。但是，它适用于所有其他文件，例如 
/pages/compressed.js
等。

我知道 onClick 和 useState 等仅适用于 客户端组件，因此我在 

use client
文件中的代码顶部编写了 
components/Header.js
，如以下代码所示。

/components/Header.js

'use client';
import Image from "next/image"
import icon from '@public/favicon.png'
import Link from "next/link"
// import ClientComponent from "./ClientComponent";
import { useState } from "react"

const Header=()=> {
  const [navBar,setNavBar]  = useState(false)
  return (
    // <ClientComponent>
    <header className='sticky flex flex-col md:flex-row top-0 z-10 bg-white outline outline-1 outline-slate-200'>
    <Link href='/'>
        <div className='flex flex-row p-0 items-center justify-items-center justify-self-center'>
        <Image alt='' className='h-20 w-20' src={icon}/>
        <h1 className='pl-30 text-3xl font-semibold text-transparent bg-clip-text bg-gradient-to-r from-green-700 to-yellow-700'>LocalNAS</h1> 
        </div></Link> 
        <ul className='hidden md:flex flex flex-row align-items-center justify-center'>
          <li className='hover-underline-animation text-zinc-600 font-medium'><Link href="/" className="text-center">Home</Link></li>
          <li className='hover-underline-animation text-zinc-600 font-medium'><Link href="/documents" className="text-center">Documents</Link></li>
          <li className='hover-underline-animation text-zinc-600 font-medium'><Link href="/media" className="text-center">Media</Link></li>
          <li className='hover-underline-animation text-zinc-600 font-medium'><Link href="/compressed" className="text-center">Compressed</Link></li>
        </ul>
        <button className="md:hidden" key="hek" onClick={()=>setNavBar((prev)=> !prev)}>
          Button
        </button>
        {
        navBar&&(
        <div>
        <ul className='md:hidden  md:flex flex flex-col'>
          <li className='hover-underline-animation text-zinc-600 font-medium'><Link href="/">Home</Link></li>
          <li className='hover-underline-animation text-zinc-600 font-medium'><Link href="/documents">Documents</Link></li>
          <li className='hover-underline-animation text-zinc-600 font-medium'><Link href="/media">Media</Link></li>
          <li className='hover-underline-animation text-zinc-600 font-medium'><Link href="/compressed">Compressed</Link></li>
        </ul>
        </div>)}
      </header>
      // </ClientComponent>
  )
}

export default Header

但是，按钮仍然无法在主页上使用。我已将其导入到 layout.js

 文件中。

/app/layout.js

：

import '@styles/globals.css' import { figtree } from '@/components/fonts'; import Header from '@/components/Header'; export const metadata = { title: 'LocalNAS', description: 'An incomplete project!' } function RootLayout ({children}){ return ( <html> <main className={figtree.className}> <Header/> <div>{children}</div> </main> </html> ) } export default RootLayout; 
并且
/app/page.js
文件如下：


import HomeData from '@/components/HomeData';
import PageHeading from '@/components/pageHeading';
import getData from './getData';




export default async function Home(){
  const compressedFiles =await getData('http://192.168.10.22:5000/compressedFiles')
  const bookFiles =await getData('http://192.168.10.22:5000/bookFiles')
  const zipFiles =await getData('http://192.168.10.22:5000/zipFiles')
  const imageFiles =await getData('http://192.168.10.22:5000/imageFiles')
  const videoFiles =await getData('http://192.168.10.22:5000/videoFiles')
  const officeFiles =await getData('http://192.168.10.22:5000/officeFiles')

  
  const groups = [
  { name: "Documents", array: bookFiles.slice(0, 6).concat(officeFiles.slice(0, 6)) },
  { name: "Compressed", array: compressedFiles.slice(0, 3).concat(zipFiles.slice(0,3)) },
  { name: "Media", array: videoFiles.slice(0, 3).concat(imageFiles.slice(0,3)) },
]

  return (
    <div>
      <PageHeading heading="Share documents, media, and other files over the Local Wifi Network."/>
      <div>
      <HomeData Files={groups.at(0)}/><hr className='mx-10 mb-10 sm:mx-20 md:mx-40' />
      <HomeData Files={groups.at(1)}/><hr className='mx-10 mb-10 sm:mx-20 md:mx-40' />
      <HomeData Files={groups.at(2)}/>
      </div>  
    </div>
  )
}

//  Home;

    



    
    javascript
    
    client
    
    navbar
    
    nextjs13
    
    
1个回答

    

      
      
      

        

          

            

              
0
投票

              
            

          

        

        
1.将数据获取移至 getServerSideProps 或 getStaticProps:


export async function getServerSideProps() {
  const compressedFiles = await getData('http://192.168.10.22:5000/compressedFiles');
  // ... fetch other data ...

  const groups = [
    { name: "Documents", array: bookFiles.slice(0, 6).concat(officeFiles.slice(0, 6)) },
    // ... other groups ...
  ];

  return {
    props: {
      groups
    }
  };
}

然后，在您的 
Home
 组件中，您可以通过 props 访问组：


export default function Home({ groups }) {
  // ...
}



  1. Header.js
    顶部的 use client 声明似乎不是标准的 JavaScript 或 Next.js 声明。如果您试图确保组件仅在客户端上运行，Next.js 提供了带有 { ssr: false } 选项的动态导入。
    

    2. 

const 标头 = 动态(() => import('@/components/Header'), {
ssr: 假
});

    



      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.