How to concatenate text and variables in React's link tag href
Table Of Contents
In React, you can write href={variable} to include variables in href, but I realized I had never concatenated variables and strings, so I looked it up.
Conclusion
href={'text'+ variable }
Environment
"react": "^17.0.1",
"gatsby": "^2.31.1",
"react-helmet": "^6.1.0",
Actual Use Case
Background
After submitting the sitemap of this blog, it was found that Google's crawler was indexing URLs with a trailing "/" at the end. To prevent page rank dilution, I needed to add a canonical tag to every post page. Here is what I wrote:
<link rel="canonical" href={'https://laratech.jp' + slug} />Result
The canonical tag was successfully generated like this:
<link data-react-helmet="true" rel="canonical" href="https://laratech.jp/posts/laravel-jest">Summary
It's as simple as the conclusion.
I thought it wasn't really worth writing an article about, but when I actually searched for it, I got a bit stuck on what to search for. So, for those who are struggling with search terms, I decided to write this article.
I hope it helps someone. That's all for now.
