当尝试使用 nextjs 新应用程序路由器的拦截路由功能将其与 Modal 一起使用时，Modal 永远不会被渲染，只有 url 发生变化。
我的项目结构如下所示：
根 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>
)
}
我的/user/[id]/page.js：
'use client'
export default function UserPage({ params }) {
return (
<p>{params.id}</p>
)
}
模态页面中的警报永远不会触发，但页面会被编译。我没有收到警告或错误或任何其他信息。有谁知道我在这里缺少什么？
如果您查看此处的 vercel 示例，该模型将作为
propexport default function Layout(props) {
return (
<html>
<body>
<GithubCorner />
{props.children}
{props.modal}
</body>
</html>
);
}
layout.js
export default async function Layout(props: {
// ...
auth: React.ReactNode
}) {
return (
<>
{/* ... */}
{props.auth}
</>
)
}
默认.js
export default function Default() {
return null
}
你的项目结构应该是这样的：