Componente principal.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

Quiero mostrar este componente en una sección específica/nueva página.

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

Después de hacer clic en estos enlaces, muestra ContentPage además de los enlaces. Pero quiero representar ContentPage en una nueva página. ¿Cómo puedo conseguir esto? ¡Por favor ayuda!