My React app displays list of documents and images the right way using Cloudinary link. This is how I do it:

{attachmentList.map((val, key) => {
  return (
    <tbody key = {key}>
      <tr style={{backgroundColor:'#e7ecf0'}}>
        <td>
          <Link
            to={val.project_attachment_url}
            target="_blank"
            rel="noopener noreferrer"
          >
            {val.project_attachment_url}
          </Link>
        </td>
      </tr>
    </tbody>
  )
})}

However, when I click on the link, it opened in a new tab and the document won’t show. Somehow, the link displayed inside the table is correct but the link returned from the tab becomes something like this: http://localhost:3000/viewproject/https://res.cloudinary.com/xxx/image/upload/v1655999804/tw9upsc87rrsxgregsmy.pdf where it includes the localhost link as well. I don’t know how I can make it to be only starting from https://res.cloudinary.com/xxx...?

>Solution :

use <a href={yourCloudinaryUrl}> instead of <Link>