react-router-dom Link组件跳转外部链接拼接本地域名无法正常跳转问题

问题原因 #

react-router-dom 提供的 Link 组件是专为应用内部路由跳转设计的，仅支持识别站内相对/绝对路径，不会将传入的带协议的外部地址识别为跨站跳转目标，因此会直接把传入的地址拼接在当前站点域名后，导致跳转异常。

解决方案 #

直接替换Link组件为原生<a>标签即可，原生<a>标签天然支持外部地址跳转，修改后的代码如下：

import React from 'react';

const Footer = () => {
  return (
    <footer className='footer-light bg-light'>
      <div
        className='text-center p-3'
      >
        <a
          className='text-decoration-none text-dark'
          href='https://xxxxxxx.github.io/'
          // 如果需要在新标签页打开可以加下面两个属性，不需要可以删除
          target="_blank"
          rel="noopener noreferrer"
        >
          © {new Date().getFullYear()} Copyright
        </a>
      </div>
    </footer>
  );
};

export default Footer;

补充说明 #

如果你的项目有统一组件样式的要求，必须使用Link组件的封装样式，可以在Link上绑定点击事件，阻止默认的路由跳转行为，手动调用window.location.href跳转外部地址，不过该方案冗余度较高，更推荐直接使用原生<a>标签。

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