封装 react-router 实现在新标签页中打开外链

使用 react-router 提供的 Link 标签做跳转时，只能传相对路径，也就是只能站内跳转。如果想跳出当前站点，则只能用原生 a 标签来实现。

为了让 Link 更通用，更灵活，我决定把它封装一下：只要传入的 to 属性的值的 origin 不等于当前页面的 origin，就切换成原生的 a 标签，并跳转到新标签页。

import React from 'react';
import { Link as RouterLink } from 'react-router-dom';
import URL from 'url-parse';

export default function (props) {
    const { to, children, newTab, className } = props;
    const { origin, pathname, query } = new URL(to);
    const linkProps = {
        ...props,
        to: pathname + query
    };
    return (
        (origin === window.location.origin && !newTab)
        ? <RouterLink {...linkProps} />
        : <a className={className} href={to} target="_blank">{children}</a>
    );
}