React Router v6.3.0 NavLink跳转外链路径拼接错误问题

React Router v6 提供的NavLink、Link组件仅用于处理单页应用内部的路由跳转，组件默认会将to属性传入的路径解析为站内路由，不会识别外部URL规则。
当前代码将外部地址传入NavLink的to.pathname字段时，React Router会按照站内路由的解析逻辑，把传入的字符串拼接到当前站点的域名后，最终生成错误的站内访问路径。另外原代码中target="_blank"属性存在引号未闭合的语法问题，也会影响属性正常生效。
项目中Index.jsx、App.jsx内的基础路由配置逻辑没有问题，无需调整。

• 所有站外地址跳转场景，不要使用React Router提供的路由跳转组件，直接使用原生HTML的<a>标签实现即可，原生标签会自动识别带http:///https://协议头的外部地址，不会做站内路径拼接。
• 给搭配target="_blank"使用的外部a标签补充rel="noopener noreferrer"属性，避免新页面访问当前页面window对象带来的安全风险。
• 修正原代码中target属性引号未闭合的语法错误。

修复后的SocialIcons组件代码 #

import React from 'react';
import styled from 'styled-components';
import { motion } from 'framer-motion';
import { Facebook, Github, Twitter, YouTube } from '../AllSvgs';
import { DarkTheme } from '../Themes';

export const SocialIcons = (props) => {
  return (
    <div className="socialIcon">
      <motion.div
        initial={{ transform: 'scale(0)' }}
        animate={{ scale: [0, 1, 1.5, 1] }}
        transition={{ type: 'spring', duration: 1, delay: 1 }}
      >
        <a
          style={{ color: 'inherit' }}
          target="_blank"
          rel="noopener noreferrer"
          href="对应外部平台地址"
        >
          <Github
            width={25}
            height={25}
            fill={props.theme === 'dark' ? DarkTheme.text : DarkTheme.body}
          />
        </a>
      </motion.div>
    </div>
  );
};

其余社交平台（Facebook、Twitter、YouTube）的外链跳转逻辑，都可以按照上述写法替换原NavLink组件即可。

内容的提问来源于stack exchange，提问作者Kawsar Ahmed Fahad