这是我想出的使这项工作有效的模式。
步骤#1：制作主页（带有可选对话框）
让你的（例如，pages/todo/[pageId].js，对于待办事项应用程序）页面。它的默认导出应该是一个使用 Next 路由器来决定是否显示对话框的组件。
例如，如果你的模态要添加/modal/5到 URL（显示模式#5）你可以这样做：
data => {
const router = useRouter();
const { modal } = router.query;
return (
<>
<Page {...data} />
{modal ? (<Dialog {...data} />) : null}
</>
);
（注意：通过使用 React“门户”，您仍然可以直接在<body>元素，如果你愿意的话。）
步骤#1.5：使页面动态导出功能
同时，制作一个getStaticProps正常导出。还制作一个getStaticPaths，但你想返回其中two每个页面的路径对象：一个包含对话框的参数，另一个将该参数设置为空字符串。这告诉 Next.js 该页面可以具有打开/关闭这两种 URL 状态。
例如，如果您的页面是/todo/1并且您有一个 modal #3 的“modal”参数的链接，您将有一个“modal URL”/todo/1/modal/3。你需要返回一个路径and一个为/todo/1.
步骤#2：建立链接
这部分有点棘手；你希望你的链接看起来像这样：
<Link
as={`/todo/${pageId}/modal/${modalId}`}
href={{
pathname: `/todo/[pageId]?modalId=[modalId]`,
query: { pageId, modalId },
}}
scroll={false}
shallow={true}
>
Click me to open dialog
</Link>
换句话说，asprop 将是您的模态 URL，单击链接时 Next 会将地址栏更改为该 URL。但它实际上会使用href对象，用于带有页面/模式 ID 查询参数的非模式 URL。它必须使用查询参数来保持核心 URL 相同。
最后我们设置scroll to false链接不会滚动到页面顶部，并且shallow to true以避免重新获取无意义的数据。完成所有这些后，一切都会正常......除非您在打开对话框的情况下刷新页面。
这是因为as只是伪造了 URL，而我们实际上还没有为其制定路由
步骤#3：制作模态“页面”
在正确的目录结构中创建页面文件（例如/todo/[pageId]/modal/[modalId].js) ...但是这个文件将非常简单。事实上，您甚至可以重复使用您的组件getStaticProps从您的主页！
export {
default,
getStaticProps,
} from 'pages/todo/[pageId]';
您需要制作一个新版本getStaticPaths尽管。它将与主页一相同，只是它只会为每个路径返回一个路径对象（即withID 中的模态参数）。
