如何在NextJs中通过多层组件传递href值

Question

所以我对NextJs还很陌生，在过去的几天里一直在努力实现这一点。仔细查看了互联网，没有发现有人有同样的问题，所以我可能误解了NextJs的工作原理。

我的文件结构如下：

//index.js
export default function Home() {
return ( 
<div className={classnames(indexStyles.wrapper, "gap")}>
<div className={indexStyles.itemswrapper}>
<Item image={banner1} text="Trusted by our clients" 
button="View project" href="/project1" />
<Item image={banner2} text="Effective design" 
button="View project" href="/project 2" />
</div>
)
}

这是我的索引文件(主页(，其中我有多个项目，这些项目是组件，因为我想在其中包含不同的内容。这就是项目组件的样子：

// Item.js
const Item = ( props, { href } ) => {
return (
<div className={classnames(itemStyles.wrapper, "wrap", "center")}>

<div className={itemStyles.thumbnail}>
<div className={itemStyles.image}>
<Image src={props.image} alt=""/>
</div>
</div>
<div className={itemStyles.cta_wrapper}>
<div className={itemStyles.title}>
<h2>{props.text}</h2>
</div>
<div className={itemStyles.knop}>
<Button href={{href}} ><a>{props.button}</a></Button>
</div>
</div>
</div>
)
}

这就是按钮组件的样子：

// Button.js
const Button = ({ children, href }) => {
return (
<div className={buttonStyles.button}>
<Link href={{href}}><a>{children}</a></Link>
</div>
)
}

因此，我的问题是，如何将index.js页面中的href作为道具传递给Item组件，以便更改Button.js中链接中的href。据我所知，这和下一个路由器有关。我希望我的问题是清楚的，如果不是，请不要回避进一步的解释。

PS。在这个问题中，我把我们所有的导入都放在每个文件的顶部，以使所有内容都更清楚，但所有内容都已正确导入。

Answer 1

在Item.jshref只是一个常规道具，没有什么特别之处。

//项目.js

const Item = ( props = {} ) => {
const {href} = props;
return (
<div className={classnames(itemStyles.wrapper, "wrap", "center")}>

<div className={itemStyles.thumbnail}>
<div className={itemStyles.image}>
<Image src={props.image} alt=""/>
</div>
</div>
<div className={itemStyles.cta_wrapper}>
<div className={itemStyles.title}>
<h2>{props.text}</h2>
</div>
<div className={itemStyles.knop}>
<Button href={href}><a>{props.button}</a></Button>
</div>
</div>
</div>
)
}

你可能想破坏其他道具以及