react router - how to render Link from content

Question

How do I render react-router Link component from a paragraph with contents? It might be at random position and I don't find handly sperating content param to beforeText, link and afterText object

Let's say I'm building a blog where the blog-post section is passing content with some url's to the text rendering component and it be Link to internal app route (or might be not, just plain text)

  class ParentComponent extends Component{
    render(){
      <Content content='Lorem ... <Link to="/page">Some link</Link> lorem ipsum ...'
    }
  }


  class Content extends Component {
     const { content } = this.props
     render(){
       <div className="text-section">
         {content}
       </div>
     }
   }

Facundo Larrosa Facundo Larrosa · Accepted Answer · 2018-06-29T22:38:52

You should use this.props.children for passing nested components so that they can be rendered straight forward. Your code should then look like this:

 class ParentComponents extends Component{
     render(){
         <Content>
          <p>Lorem ...<Link to="/page">Some link</Link>lorem ipsum</p>
         </Content> 
     }
 }


class Content extends Component {
    render(){
        <div className="text-section">
            {this.props.children}
        </div>
    }

}

react router - how to render Link from content

1 Answers