React-Router总是将第三方站点URL追加到基础URL后是什么原因？

问题原因 #

你遇到的跳转地址拼接问题本质和react-router无关，是HTML原生<a>标签的href属性规则导致的：

• 当href的值没有带http:///https://协议前缀时，浏览器会默认将其识别为站内相对路径，自动拼接当前站点的基础URL生成最终访问地址，你写的www.github.com就属于这种情况
• react-router默认只会接管站内相对路径的跳转逻辑，合法的带协议的第三方外链不会被react-router拦截处理

修复方案 #

给href的第三方地址补全https://协议前缀即可，修改后的代码如下：

<SlideCard onClick={() => moveSlide(offsetFromMiddle)}>
        <a href={'https://www.github.com'} target={'_blank'} rel={'noreferrer'} className={'a_no_style'}>
            {content}
        </a>
</SlideCard>

如果需要在当前窗口打开外链，把target的值留空即可。

额外注意事项 #

如果你的项目里统一封装了跳转组件（比如封装了react-router的Link组件做统一跳转逻辑），需要确保组件内部做了路径判断：当传入的地址是带协议的外链时，直接渲染原生<a>标签，不要走Link的站内跳转逻辑，避免出现异常拦截。

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