将道具传递给兄弟组件的最佳方式

Question

我正在用 Next.js 实施一个项目，我一直在努力寻找实现以下目标的最佳方法。

我有一个页面 /home，它使用 getServerSideProps 调用 API 并接收打印到该页面多个组件中的信息：

function PlaylistItem({playlistName,id,description,background} : { playlistName : string, id : string, description : string, background : string}) {
return (
    <a className='flex-col justify-center flex text-center items-center cursor-pointer mb-6' href='/difficulty'>
        <div className=' w-[100px] h-[100px] rounded-full' style={{backgroundImage: `url(${background})`,backgroundPosition:"center",backgroundSize:"cover"}}></div>
        <p className='mt-2'>{playlistName}</p>
    </a>

)
}

 export default PlaylistItem

根据用户单击的组件，我想将道具（id、播放列表名称等）传递到锚标记中指定的下一页。

我看到我可以通过动态路由并将值作为查询传递来实现这一点，但这真的是我能做到的最好方法吗？

Answer 1

实现此目的的理想方法是使用动态路由，如果您不需要为下一页共享 url 功能，也可以使用 cookies 保存并进入下一页。

Answer 2

动态路由是实现这一目标的唯一方法