I have been learning react for past few months and I need help with my first project.

I have made reusable bootstrap card component. The component has an anchor tag and I want to be able to display other components on a completely new page when this tag is clicked on two different cards. I tried to understand my way around react-router-dom but I am not able to render the other components in different pages. They render right below the card component.

Below is the code for my card component:

CardUI.jsx:

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>
           <a href="#" class="btn btn-primary">Know more</a>
        </div>
      </div>
    </div>
  );
}

Cards.jsx:

function Cards(){
    return(
        <div className="container-fluid d-flex justify-content-center">
            <div className="row">
                <div className="col-lg-6">
                    <CardUI
                        title = 'What is sugar?'
                        text = "Sugar is basically carbohydrates, our primary fuel source."
                        />

                </div>
                <div className="col-lg-6">
                    <CardUI 
                         title = 'Artificial Sweeteners'
                         text = "Chemically produced sugar substitutes />
                </div>

            </div>
        </div>
    )
}

Will be grateful to whoever can help me with this. Thanks you.