导航未加载NEXT.JS链接的供应商后

Question

这是这张照片不起作用的东西。正如标题说的那样，它没有加载作为导航条的响应性腐蚀。

return (
        <Link  key={index} href={'/'+item.id} >     
         <li className="nav-item dropdown position-static active">
          <a className="nav-link" href={item.id} >{item.categoryName}</a> 
         </li>
        </Link>
)

上面的代码是我现在路由的方式。当我将它更改为简单的HTML5标记时，它会像预期的那样工作。如何正确添加供应商或正确使用链接的方式。

<script src="http://localhost:3000/vendor/jquery.min.js"  />
<script src="http://localhost:3000/vendor/popper.js/popper.min.js"  />
<script src="http://localhost:3000/vendor/bootstrap/js/bootstrap.min.js"  />
<script src="http://localhost:3000/vendor/mega-menu/assets/js/custom.js"  />
<script src="http://localhost:3000/vendor/aos-next/dist/aos.js"  />
<script src="http://localhost:3000/vendor/jquery.appear.js"  />
<script src="http://localhost:3000/vendor/jquery.countTo.js"/>
<script src="http://localhost:3000/vendor/mixitup-3/mixitup.min.js"/>
<script src="http://localhost:3000/js/theme.js" />

我就是这样进口供应商的。

在Navbar组件中，导航链接是动态的，所以我使用useEffect来获取数据。

useEffect(() => {
    fetchCategory().then(res => {
      setCategory(res);
    })
    console.log(router.pathname)
  },[router.pathname, id]);

Answer 1

您应该将Link设置为a的直接父级，并使用passHref支柱将href属性从Link传递给a。

return (
   <li key={index} className="nav-item dropdown position-static active">
      <Link href={'/'+item.id} passHref> 
         <a className="nav-link">{item.categoryName}</a> 
      </Link>
   </li>
)