当尝试使用nextjs的新应用路由器的拦截路由功能来将其与Modal一起使用时,Modal永远不会被渲染,只有url发生变化。
我的项目结构看起来像这样:
*/app
*@modal
*(.)用户
*[ID]
- page.js
*用户名
*[id] - page.js
- page.js
根page.js包含一个链接到/user/someUUID的组件。当点击该链接时,只有URL发生变化,模式永远不会被渲染。
我使用了这个示例代码作为参考:https://github.com/vercel-labs/nextgram
它工作得很好。我使用了与示例中完全相同的模态组件。
我的/@modal/(.)user/[id]/page.js:
'use client'
import Modal from "../../../../components/modal"
export default function UserModal({ params: { id: userId } }) {
alert("in modal page")
return (
<Modal>
<p>{userId}</p>
</Modal>
)
}
My /user/[id]/page.js:
'use client'
export default function UserPage({ params }) {
return (
<p>{params.id}</p>
)
}
Modal页面中的警报永远不会触发,但页面会被编译。我没有收到任何警告或错误或任何东西。有人知道我错过了什么吗?
1条答案
按热度按时间xvw2m8pv1#
如果查看vercel example here,该模型将作为
prop
传递给布局文件