SPA で右クリックや shift + クリックなどによる別窓表示に対応させる

経緯

import useReactRouter from 'use-react-router'
import { myAction } from './myAction'

export const Link = ({ href, children }) => {
  const { history } = useReactRouter()

  const onClick = e => {
    myAction(href)
    // もし中クリックや ctrl + click だったらここで return しないといけない
    // if (isMiddleClick(e)) return
    history.push(href)
    e.preventDefault()
    return false
  }

  const _href = `#${href}`

  return (
    <a href={_href} onClick={onClick}>
      {children}
    </a>
  )
}

上記のようなソースコードを書くと Mac の Meta + click や windows の ctrl + click を押した際に
別のタブで表示されるのではなく現在のタブで history.push(href) が実行される。
ただのクリックと中クリックや ctrl + click を区別して対応を変える必要がある。

各種ライブラリがどのように区別しているか

ライブラリによって
ただのクリックと中クリックや ctrl + click を区別するために
チェックしている項目が多少異なるようです。
良い感じに組み合わせてキミの最強の onClick を作ろう！！！！！

gatsbyjs の対応

gatsby/packages/gatsby-link/src/index.js#L137

チェック項目 (一部

• e.button !== 0 // メインボタン以外が押された
• e.defaultPrevented // すでに defaultPrevent されたイベント
• e.metaKey // metaKey が一緒に押された
• e.altKey
• e.ctrlKey
• e.shiftKey

next.js の対応

next.js/packages/next/client/link.js#L60

チェック項目 (一部

• nodeName === 'A' // クリックされたのが Anchor タグ
• e.nativeEvent.which === 2 // 中央ボタンがクリックされた
• !isLocal(href) // 外部へのリンクが押された

react router の対応

react-router/packages/react-router-dom/modules/Link.js#L15

チェック項目 (一部

• (!this.props.target || this.props.target === "_self") // target が指定されていた
• !isModifiedEvent(event) // metaKey などが一緒に押された