Next.js v6.0.3中Link标签绑定div无法实现客户端路由的解决方法

我刚帮你排查了下这个问题——在Next.js v6.0.3版本里，<Link>组件的默认行为是只对直接子级的<a>标签生效。如果你的直接子元素是<div>这类非锚点元素，Link没办法自动把路由的href信息传递下去，自然就触发不了客户端路由跳转了。

下面给你两种可行的解决方案：

方案1：给Link添加passHref属性并增强可访问性 #

这种方案不需要改动DOM结构，只需要给Link加上passHref，同时优化div的可点击性和可访问性：

import Link from "next/link";

export default ({ src, title }) => (
  <Link href="/one" passHref>
    <div 
      className="element" 
      role="button" 
      tabIndex={0} 
      onClick={() => {}} 
      onKeyPress={(e) => {
        // 支持键盘用户按Enter或Space键触发跳转
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          window.location.href = "/one";
        }
      }}
    >
      <div className="img-container">
        <img src={src} />
      </div>
      <style jsx>{`
        .element{
          width: 30%;
          height: auto;
          margin:10px;
          border-radius:50%;
          cursor: pointer; /* 提示用户这是可点击元素 */
        }
        .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>
)

关键修改点说明： #

• passHref：强制Link把href属性传递给直接子元素，让客户端路由逻辑能绑定到div上
• role="button"和tabIndex={0}：让键盘用户可以通过Tab键聚焦到这个div，符合Web可访问性标准
• 键盘事件处理：支持Enter或Space键触发跳转，照顾纯键盘操作的用户
• cursor: pointer：直观提示用户这个区域是可点击的

方案2：在Link内嵌套<a>标签（更简单且语义化） #

如果你愿意调整DOM结构，直接把<a>作为Link的直接子元素，然后把原来div的样式迁移到a标签上，这样完全符合Link的默认行为，不需要额外配置：

import Link from "next/link";

export default ({ src, title }) => (
  <Link href="/one">
    <a className="element">
      <div className="img-container">
        <img src={src} />
      </div>
      <style jsx>{`
        .element{
          display: block; /* 让a标签拥有块级元素的布局特性 */
          width: 30%;
          height: auto;
          margin:10px;
          border-radius:50%;
          text-decoration: none; /* 去掉默认的链接下划线 */
          color: inherit; /* 继承父元素文字颜色 */
        }
        .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>
    </a>
  </Link>
)

优势： #

• 完全符合HTML语义化，搜索引擎和辅助设备更容易理解
• 不需要额外处理可访问性，a标签本身就支持键盘导航和点击事件
• 代码更简洁，不需要额外的事件处理逻辑

你可以根据自己的需求选其中一种方案，两种都能解决你遇到的客户端路由失效问题~

内容的提问来源于stack exchange，提问作者Sumanth Reddy