React / React Router - Treat <a> tags like <Link> tags

Question

I am passing pre-compiled HTML to my React component through props. The original data looks something like this.

let pageData = [
   title  : 'About',
   content: '<p>Hello <strong> World!</p><a href="/contact">Contact</a>'
]

Then in the component using the dangerouslySetInnerHTML method because I'm not sure if there is anything else to use.

import React from 'react';

export default class PostText extends React.Component {
  render() {
    return (
        <div
          dangerouslySetInnerHTML={{__html: this.props.content}}
        />
      </div>
    );
  }
}

But my question is, how can I convert the <a href="/contact">Contact</a> tag to <Link to="/contact">Contact</Link>.

Even if I don't change the mark up, is there a way to to do something like, "when I click an <a> tag, treat is as <Link> tag".

Answer 1

I think you could do something like this, intercepting links click events inside you div and navigating with router:

<div
    dangerouslySetInnerHTML={{__html: this.props.content}}
    onClick={event => this.navigate(event)}
  />
</div>

and then:

navigate (event) {
  event.preventDefault()

  if (event.target.tagName === 'A') {
    this.props.router.push(event.target.getAttribute('href'))
  }
}