如何使用链接标签

Question

正如 nextjs 文档中提到的，Link当在 a 上使用时，我无法通过标签 进行客户端路由div，但如果在锚标签上使用我可以导航。
我正在使用 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>

)

Answer 1

您在导致问题的错误位置使用了样式标签。尝试像 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>