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