元エンジニアPMのプロダクトマネージャーお役立ち情報

スタートアップから大規模プロダクトまで担当している元エンジニアの筆者が、事業開発・プロダクトマネジメントに役立つ情報を発信します

SNSシェア時のURLのパラメータの二個目以降が消える問題を回避する

twitterや、facebookのurlをhrefに入れる際に二個目以降のパラメータが消えたりしたのでその回避策

発生したコード

const twLink = (url) => {
  return (
    <Link to={
      `http://twitter.com/share?url=${url}?utm_source=twitter&utm_medium=social&utm_campaign=hoge`
    }>twitter</Link>
  )
}

これだと、シェアされるURLは、${url}?utm_source=twitterになり、後続のパラメータが消えてしまっています。

解決策: シェアするURLをencodeURIComponent する

const twLink = (url) => {
  return (
    <Link to={
      `http://twitter.com/share?url=${encodeURIComponent(
        `${url}?utm_source=twitter&utm_medium=social&utm_campaign=hoge`
      )}`
    }>twitter</Link>
  )
}

   これで正しくパラメータ付与されてシェアできるようになりました!