Tengo una lista de elementos = exemple1, exemple2, ..... y cada uno hizo clic cuando elegí uno de la lista, la URL sería así:

• localhost:3000/cartera/ejemplo1
• localhost:3000/cartera/ejemplo2

como puedo hacerlo por favor

la lista

 import { Link } from 'react-router-dom'; export const ListPortfolio = (props) => { const portfolio = props.portfolio; const number = props.number; return( <div className="d-flex flex-wrap table"> {portfolio.map((item, i) => <Link to={{ pathname:"/DetailPortfolio", state:item}} state className="text-black text-decoration-none link" key={item.id} > <div className="card"> <img src={item.image} alt={item.title} /> <div className="card-body"> <h3 className="card-title">{item.title}</h3> <span className="url">URL: </span><span>{item.excerpt && item.excerpt.slice(10, -5)}</span> </div> </div> </Link> )} </div> ) }

detallesDeLista

 const DetailPortfolio = (props) => { const {state} = props.location return ( <> <div className="container-fluid"> <Details> <div> <div>{state.title}</div> <img src={state.image} alt={state.title} /> <div>{state.content}<div/> </div> </div> </Details> </div> </> ); }