I have list of items = exemple1, exemple2, ..... and each one clicked when I choose one of the list the URL be like :

• localhost:3000/portfolio/exemple1
• localhost:3000/portfolio/exemple2

how I can do it please?

the list

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

detailsOfList

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