MainComponent.jsx

//other code
<CardGroup>
  <Router>
    {cards.map((value,idx) => { return <TutorialCard key={idx} val={value} /> })}
    <Switch>
      <Route path="/subject/:title" children={(props)=>{<ContentPage {...props}/>}}/>
    </Switch>
  </Router>
</CardGroup>
//other code

ContentPage.jsx

I want to show this component in a specific section/new page.

export default function CotentPage(props){
  return <h1>This is content page-{props.match.params.title}</h1>  
}

TutorialCard.jsx

//this component create links.
export default function tutorialCard({ val }) {
  return (
    <Card border="primary" style={{ width: '18rem' }} className='cards'>
      <Link exact to={`/subject/${val}`}>
        <Card.Header className="text-center">
          <h6>{val}</h6>   
        </Card.Header>
        <Card.Body>
          <img src={cardSvg} className="fitImage"></img>
        </Card.Body>
      </Link>
    </Card>
  );
}

After clicking these links it render ContentPage besides links. But I want to render ContentPage in a new page. how can I achieve this? Please Help!