Estoy tratando de abrir en una nueva pestaña una URL recuperada de una API. Es básicamente una URL abreviada. Pero cuando trato de agregarlo al atributo href de my , me devuelve algo como:

localhost:3000/[la URL abreviada correcta]

o si estoy implementando el sitio web:

[la URL de mi sitio web]/[la URL abreviada correcta]

Aquí está mi componente, donde el enlace es el que tiene el nombre de clase "url abreviado":

 import { React, useState } from "react"; import "../styles/ModalUrl.scss"; import CloseIcon from "@mui/icons-material/Close"; const ModalUrl = ({ modalClass, setModalClass, shortenedUrl }) => { const closeModal = () => { setModalClass("hidden"); }; return ( <div className="modal-and-background"> <div className={`dark-background ${modalClass}`}></div> <div className={`modal-url ${modalClass}`}> <h1>Your URL is ready!</h1> <a href={shortenedUrl} className="shortened-url"> {shortenedUrl} </a> <div className="button-container"> <button className="btn-close" onClick={closeModal}> CLOSE <CloseIcon className="close-icon" /> </button> </div> </div> </div> ); }; export default ModalUrl;

¡Gracias!