你好,我正在为一个页面做面包屑,这是面包屑数组,它看起来像:
第一个月
所以在JSX中我尝试使用Next.js呈现这个数组
import Link from "next/link";
const Breadcrumbs = (props) => {}
const breadcrumbs = ['Home', "Men's Top", 'Winter Fur']
return (
<>
<div style={{ height: "50px", paddingLeft: "30px" }}>
{
`${
breadcrumbs.map((crumb, index, array) => {
if (crumb !== array[array.length - 1]) {
return (
<Link href={index === 0 ? "/" : "/" + crumb}>
{crumb}
</Link> + " > "
)
} else {
return <Link href={"/" + crumb}>{crumb}</Link>
}
}).join().replace(/,/g, "")
} `
}
</div>
</>
)
}
export default Breadcrumbs;
因此,此代码在页面上呈现为[object Object] > [object Object] > [object Object]
但是如果不包括Link标签,我有Home > Men's Top > Winter Fur
。为什么Link标签在页面上呈现为[object Object] > [object Object] > [object Object]
?我做错了什么,因为我真的需要Link标签在页面之间切换?
1条答案
按热度按时间fnvucqvd1#
因为您将Link组件 Package 到了字符串中。请从代码中删除
${