导航供应商后未加载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" />

这就是我导入供应商的方式。

在导航栏组件中，导航链接是动态的，所以我使用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>
)