ikuo00ukの日記

元エンジニアのプロダクトマネージャー。 読んだ本とか紹介しています。

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>
  )
}

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