我是React的新手，我尝试在React组件中插入一个链接。我创建了一个对象，每个项目都包含一个外部链接。这个对象是：

export const myList =
[
    {
        "id":"P1",
        "title":"Title1",
        "description":"The first description",
        "link":"https://random-link.io",
        "cover":require("../img/myImg1.webp")
    },
 
    {
        "id":"P2",
        "title":"Title2",
        "description":"The second description",
        "link":"https://random-link2.io",
        "cover":require("../img/my2ndImg.webp")
    },
    ... 
];

其主要思想是为列表中的每一项创建页面，并创建一个指向外部页面的链接以查看更多信息。
我试着这么做：

function Page() {
   
    const id = useParams();
    const pageList = myList.find(list => list.id === id.id);

    return(
        <>
            {
                pageList ? (
                    <div className="Page">
                        <img className="ListCover" src={pageList?.cover} alt={pageList?.title}/>
                      
                            <div className="information-list">
                                <span className="title-list">{pageList?.title}</span>
                              
                                                   
                        </div>
                        <div className="description-list">
                            <Dropdown titre="Description" description={pageList?.description} link={pageList?.link} />
                           
                        </div>
                    </div>
                ) : <Navigate replace to="/404"/>
            }
        </>
    )
}

export default Page;

在Dropdown组件中，我创建了以下内容：

function Dropdown({title, description, link}) {
    
    const [open, setOpen] = useState(false);

    return(
        <div className="dropdown" id={`dropdown-${title}`}>
            <div className="header-dropdown">
                <div className="title-dropdown">{title}</div>
                <span className={`arrow-dropdown ${open}`} onClick={() => setOpen(!open)}>
                    <img src={arrow} alt="Open it"/>
                </span>
            </div>
            {
                /* if dropdown is TRUE then it show the description */
                open && <div className="description-dropdown">{description}
                <a href={{pathname:{link}}} rel="noreferrer"> See more</a> </div>
            }
        </div>
    );
}

export default Dropdown;

问题是链接将我发送到：http：//localhost：3000/[对象%20对象];使用另一种方法，我得到了http：//localhost：3000/myProjet/https://random-link.io