Props VS States

 To pass an additional id as a state value in the Link component and access it in the destination component, you can follow these steps:

Old Way: You can pass the id value (or any other data) to the target component via the state prop in Link like this:

<Link

  to={{

    pathname: `/services/${service.title}`,

    state: { id: service.id } // Passing id as state

  }}

>

  Read More <i className="fa fa-arrow-right"></i>

</Link>

New Way: Alternatively, if you're using react-router-dom v6, the state prop is passed differently:

<Link

  to={`/services/${service.title}`}

  state={{ id: service.id }}  // Passing id as state

>

  Read More <i className="fa fa-arrow-right"></i>

</Link>