React中从对象添加动态外部链接跳转错误求助

你的跳转问题源于两个关键错误：

1. <a>标签的href属性写法错误 #

Dropdown组件里你把href写成了{{pathname:{link}}}，这种嵌套对象的写法会被浏览器解析为字符串[object Object]，直接导致错误的跳转地址。外部链接的href只需传入字符串格式的链接地址即可，React Router的对象格式是给<Link>组件使用的，不适用于原生<a>标签。

2. Props名称不匹配 #

Page组件给Dropdown传递的是titre="Description"，但Dropdown接收的props参数是title，参数名不匹配会导致title值为undefined，不仅影响组件ID生成，还可能引发其他潜在问题。

修改后的代码： #

Page组件（修正Props名称）：

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">
                        {/* 将titre改为title，与Dropdown的接收参数匹配 */}
                        <Dropdown title="Description" description={pageList?.description} link={pageList?.link} />
                    </div>
                </div>
            ) : <Navigate replace to="/404"/>}
        </>
    )
}
export default Page;

Dropdown组件（修正href写法）：

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>
            {open && (
                <div className="description-dropdown">
                    {description}
                    {/* 直接传入link作为href，新增target="_blank"让外部链接在新窗口打开 */}
                    <a href={link} rel="noreferrer" target="_blank"> See more</a>
                </div>
            )}
        </div>
    );
}
export default Dropdown;

修改完成后，点击“See more”即可正确跳转到你定义的外部链接地址。

内容的提问来源于stack exchange，提问作者Vlad