How to concatenate text and variables in React's link tag href
Thank you for your continued support.
This article contains advertisements that help fund our operations.
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.
