How to render a react-router Link component from text?

Here's my situation:

This is a Single Page App that is using react-router-dom to perform client-side routing.

I have a AddBlogPostPage where the admin will create blogPosts.

• This page has lots of inputs and textareas to build the blogPost paragraphs and images.
• Inside a textarea input, the admin will enter a paragraph text that will be rendered inside a <p> tag using dangerouslySetInnerHTML when the blogPost is displayed.
• But sometimes is necessary to add links to other pages of the App and I'm doing the following:
• The admin enters in the textarea:
  • For example: the text pattern [products](/products)
  • And this gets replaced and rendered as <a href="/products">products</a>

But when I click on the <a> the App refreshes other than switch routes with react-router-dom. That is because I'm using an <a> tag instead of a Link component that comes built-in with react-router-dom.

But since I'm rendering my paragraphs with dangerouslySetInnerHTML, how can I display the React component Link instead of an html tag <a> in this situation?

From my research so far, this does not seem to be possible. Is there any other way around this?

I'm quite sure this isn't the the most efficient way of doing it, nor is it really reuseable. But here is, at least, a starting point.

You're storing that textarea information in state, I assume. When rendering it FROM state, use

const firstText = this.state.userText.split('[products]');

to get everything before your tag, then

const lastText = firstText[1].split('[/products]');

to get everything after your link. Your render will look something like:

<p>
    {firstText[0]}
    <Link to="/products">{lastText[0]}</Link>
    {lastText[1]}
</p>

For an actual use case, you'll want to store that in state, keep track of what & where all of your tags are, and throw everything into an array in a separate state entry so you can map the output appropriately. This would undoubtedly be a method instead of a series of variable declarations. And I'm sure it's not terribly efficient. But it's not impossible!

Best of luck.