Question

正如在nextjs文档中提到的那样，当我在div上使用时，我无法通过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>

）

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>

Answer 2

首先在页面顶部导入库

(int, int)[] intervals

然后像这样使用它

import Link from "next/link";

如果使用通过名称路由链接的节点js路由器href

Answer 3

不确定您要问的是什么问题，因为您似乎通过声明自己不能与div一起使用而仍然可以路由它来回答自己。但需要重申的是，如果您使用的不是href以外的其他元素，则只会传递onClick事件。您必须根据onClick自己触发路由。在我看来，仅将转换为可以使您仍然路由到/ one。

Answer 4

根据我对此类问题的了解，它仅在开发模式下发生。您能为我验证一下吗？

尝试解决此问题，将监听器放在componentDidMount中的pages/_app.js生命周期方法中。

import Router from 'next/router';

Router.events.on('routeChangeComplete', () => {
  if (process.env.NODE_ENV !== 'production') {
    const els = document.querySelectorAll('link[href*="/_next/static/css/styles.chunk.css"]');
    const timestamp = new Date().valueOf();
    els[0].href = '/_next/static/css/styles.chunk.css?v=' + timestamp;
  }
});

发件人：Relative issue discussen

Answer 5

我已经使用了这个技巧，并且效果很好。
在文件_app.js中，导入一个空的CSS文件：

import "../assets/css/empty.css";

Answer 6

替换此：

<Link href="/one">

与此：

<Link route="/one">

Nextjs Link标签不起作用

6 个答案: