React

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

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

オススメ本
Web技術を勉強するなら、かなりオススメの雑誌です。毎月新しい発見があります。ついに最終号・・・、みなさん買いましょう!!
読んで損することはない名著。命名で悩むことが多い人はこの本がオススメです。

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://poppotennis.com' + slug} />

結果

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

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

まとめ

結論のとおりです。

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

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