React中使用封装自NavLink的HeaderLink跳转外部URL报错如何处理？

问题原因 #

NavLink是React Router生态下的专属组件，仅支持站内路由跳转，传入外部域名的to参数会被默认识别为站内路径，自然无法正常跳转到外部站点。

解决方法 #

方案1：替换为原生a标签，适配外部跳转需求

如果该按钮不需要用到activeClassName等路由专属特性，直接修改HeaderLink的封装逻辑即可：

// 将styled的基础组件从NavLink改为原生a标签
const HeaderLink = styled('a')(({ theme }) => ({
  display: 'flex',
  position: 'relative',
  justifyContent: 'center',
  alignItems: 'center',
  // 其余原有样式完全保留
}))

// 调用时将to属性替换为原生href属性
<HeaderLink href="http://google.com" target="_blank" rel="noopener noreferrer">
  <NavText
      variant="h6"
      noWrap
      component="div"
  >
    Redirect
  </NavText>
</HeaderLink>

如果不需要新窗口打开跳转，删除target="_blank"和rel="noopener noreferrer"属性即可。

方案2：拦截点击事件，保留NavLink原有能力

如果需要保留activeClassName等路由相关特性，可通过点击事件拦截实现外部跳转：

<HeaderLink 
  to="http://google.com" 
  activeClassName="active-page"
  onClick={(e) => {
    // 阻止默认的站内跳转逻辑
    e.preventDefault()
    // 当前窗口跳转外部地址
    window.location.href = 'http://google.com'
    // 如需新窗口打开，替换为下面的代码即可
    // window.open('http://google.com', '_blank')
  }}
>
  <NavText
      variant="h6"
      noWrap
      component="div"
  >
    Redirect
  </NavText>
</HeaderLink>

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