ホーム
Sponserd by↑転職したい人向け、ベンチャー企業の採用動画があります

Reactのlinkタグのhrefなどで、テキストと変数を結合させたい

React では、href={hensuu}と書くことにより、変数を href などに書くことができましたが、よく考えたら変数と文字列を結合させたことがなかったので調べました。

目次

  1. 結論
  2. 環境
  3. 実際の使用例

結論

href={'テキスト'+ hennsuu }

環境

 "react": "^17.0.1",
 "gatsby": "^2.31.1",
 "react-helmet": "^6.1.0",

実際の使用例

背景

当ブログのサイトマップを送信した結果、Google のクローラーが末尾に「/」をつけたものをインデックスしていることが判明したため、投稿ページの全てに canonical タグを付けて、ページ評価が分散しないようにしたが、canonical タグが必要になったところ、書いたのがこちら

<link rel="canonical" href={'https://poppotennis.com' + slug} />

結果

このように無事 canonical タグが生成されました。

<link data-react-helmet="true" rel="canonical" href="https://poppotennis.com/posts/laravel-jest">

まとめ

結論のとおりです。

ま、そんなに記事にするほどのものではないかな?とは思ったのですが、実際に検索するときなんて検索すれば良いのかちょっと詰まったので、サーチワードで迷っている人に向けて、この記事を書いてみました。

誰かの助けになれば幸いです。それでは。