Hi John. Thank you for your interest in my problem. Based on the reacttraining.com website, I did try something but could not get the result I want on my webpage. I want the component 'Aboutsugar' to render as a different page and not right below the card component on the same page. Below is the code I tried: function CardUI(props) { return ( < div className = " cardbox "> < div class = "card text-center" > < div class = "card-body" > < h5 class = "card-title" > {props.title} </ h5 > < p class = "card-text" > {props.text} </ p > < Router > < Link to = "/aboutsugar" > Know more </ Link > < div > < Switch > < Route path = "/ aboutsugar " component = {Aboutsugar} > </ Route > </ Switch > </ div > </ Router > </ div > </ div > </ div > ); }