Link component that handle internal or external links

import React from 'react';
import {Link as ReactLink} from 'react-router';

export default class Link extends React.Component {
  parseTo(to) {
    let parser = document.createElement('a');
    parser.href = to;
    return parser;
  }
  isInternal(toLocation) {
    return window.location.host === toLocation.host;
  }

  render() {
    const {to, children, ...rest} = this.props;
    const toLocation = this.parseTo(to);
    const isInternal = this.isInternal(toLocation);
    if (isInternal) {
      return (<ReactLink to={toLocation.pathname} {...rest}>{children}</ReactLink>);
    } else {
      return (<a href={to} target="_blank" {...rest}>{children}</a>);
    }
  }
}

👍

Perhaps you'd consider ditching the semicolon from '://' - protocol agnostic links won't work with your class (like //static.example.com/some/image.png which work well and creating a element is not necessary - at least if there's a // on the first char. :)

V4 uses import {Link as ReactLink} from 'react-router-dom';

Here is an alternative utility function:

const isInternalURL = (to: string) => {
  try {
    const url = new URL(to, window.location.origin);
    return url.hostname === window.location.hostname;
  } catch {
    return false;
  }
};

Here is an alternative utility function:

const isInternalURL = (to: string) => {
  try {
    const url = new URL(to, window.location.origin);
    return url.hostname === window.location.hostname;
  } catch {
    return false;
  }
};

This is awesome, thank you @colinschoen!