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>
);
}