React项目使用react-router-dom的Link组件出现URL重复问题

核心诱因 #

你使用的react-router-dom提供的Link组件仅适用于站内路由跳转，不支持站外绝对地址跳转。当你给to属性传入站外URL时，Link会默认将其识别为站内相对路径，自动将当前页面的域名拼接到你传入的URL前面，最终就会出现URL重复拼接的异常。

修复方案 #

根据你的使用场景二选一即可：

• 场景1：需要跳转到站外地址
  直接替换Link组件为原生a标签即可，参考修改后的NavLink组件代码：

  import React from 'react';
  
  const NavLink = ({ url, label }) => {
    return (
      <li className='nav-item'>
        <a href={url} target="_blank" rel="noopener noreferrer">{label}</a>
      </li>
    );
  };
  
  export default NavLink;
  

  其中rel="noopener noreferrer"是站外跳转的标准安全配置，避免新打开的页面存在安全风险。
• 场景2：本身就是做站内路由跳转
  你当前配置的menu项url不符合要求，需要替换为站内相对路径（例如/home、/contact），同时需要在App.js的Router组件内部补充对应的Route配置，将路径和对应的页面组件绑定。

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