javascript - Nextjs链接标签不起作用

如nextjs文档中所述，当在div上使用Link标签时，我无法通过Link进行客户端路由。我正在使用nextjs v6.0.3

import Link from "next/link";
export default ({ src, title }) => (
 <Link href="/one">
    <div className="element">
        <div className="img-container">
            <img src={src} />
        </div>
        <style jsx>{`
    .element{
        width: 30%;
        height: auto;
        margin:10px;
        border-radius:50%;
    }
    .img-container{
        width:100%;
        height:auto;
    }
    img{
        width:100%;
        height:auto;
    }
    .event-title{
        text-align:center;
    }
    `}

        </style>
        <div className="event-title"><p>{title}</p></div>
    </div >
</Link>

）

最佳答案

您在错误的地方使用了样式标签，这造成了问题。尝试像nextjs文档中提到的那样使用它。

 <div>
    <Link href='/one'>
      <div className='element'>
        <div className='img-container'>
          <img src={src} />
        </div>
        <div className='event-title'><p>{title}</p></div>
      </div>
    </Link>
    <style jsx>{`
      .element{
          width: 30%;
          height: auto;
          margin:10px;
          border-radius:50%;
      }
      .img-container{
          width:100%;
          height:auto;
      }
      img{
          width:100%;
          height:auto;
      }
      .event-title{
          text-align:center;
      }
      `}
    </style>
 </div>

关于javascript - Nextjs链接标签不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50523820/