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

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

いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。

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

結論

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

環境

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

実際の使用例

背景

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

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

結果

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

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

まとめ

結論のとおりです。

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

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