Javascript 如何使用链接标签

正如nextjs文档中提到的，当在

div

上使用时，我无法通过

链接

标记进行客户端路由，尽管如果在锚标记上使用，我可以导航。
我正在使用NextJSV6.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>

)

从“下一个/链接”导入链接；
导出默认值（{src，title}）=>(
{`
.元素{
宽度：30%；
高度：自动；
利润率：10px；
边界半径：50%；
}
.img集装箱{
宽度：100%；
高度：自动；
}
img{
宽度：100%；
高度：自动；
}
.活动名称{
文本对齐：居中；
}
`}
{title}

)

您在创建问题的错误位置使用了样式标记。试着像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>

{title}

{`
.元素{
宽度：30%；
高度：自动；
利润率：10px；
边界半径：50%；
}
.img集装箱{
宽度：100%；
高度：自动；
}
img{
宽度：100%；
高度：自动；
}
.活动名称{
文本对齐：居中；
}
`}

不确定您的问题是什么，因为您自己似乎回答了这个问题，表示您不能与div一起使用，但仍然拥有它。但重申一下，如果您与href以外的元素一起使用，则不会传递，只传递onClick事件。您必须根据onClick自己触发路由。在我看来，只要将转换为an，您仍然可以路由到/one。

根据我对此类问题的理解，它只在开发模式下发生。。你能帮我核实一下吗

尝试将此作为一种解决方法，将侦听器放在

pages/\u app.js

中的

componentDidMount

生命周期方法上

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;
  }
});

---

From:

首先在页面顶部导入库

import Link from "next/link";

那就这样用吧

<Link href={'/'} params={'id': 1}>
  <a>link</a>
</.Link>

链接

---

如果使用node js router href按名称链接route，我已经使用了这个技巧，而且效果很好。
在文件

\u app.js

中，导入一个空css文件：

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

替换此项：

为此：

在

页面

目录中或

页面

目录之外的组件中？或者你可以尝试将

链接包装到一个div中吗？这个组件位于pages目录之外。但是我尝试过包装不起作用。你的问题到底是什么？虽然这段代码可以解决OP的问题，但最好添加上下文，比如它如何工作/为什么工作，甚至可能还有一个源链接。我在nextjs的github上读过，我现在找不到链接，但我得到的解释是，如果我们不导入css文件，区块文件不会重新生成。事实上，它仍然运行良好