小编Hh *_*mer的帖子

我正在开发一个 Next.js 应用程序，我在其中实现了拦截路由功能。我的应用程序目录中有一个目录结构，如下所示：

/news/[id]/page.jsx\n\n/@modal/(.)news/[id]/page.jsx\n

我想要的行为如下：

\n
• 模态预览：点击新闻卡片会截取当前路线，并以模态方式显示新闻内容的简要预览。
\n
• 导航到新闻页面：我想为用户提供一个选项（通过最大化按钮或开始时的选择）导航到完整的新闻页面，而不会再次触发硬页面刷新或模式。
\n

但是，当我尝试使用模式已打开等方法导航到完整新闻页面router.push()时，它会再次触发模式或根本不工作。另一方面，使用<a>tag 或会导致硬刷新。window.location.reload()

更新：

我创建了一个基于 Vercel\xe2\x80\x99s Nextgram 演示的工作示例来说明我的问题：https ://wk6x5c-3000.csb.app/

在此修改版本中，每个图像都有两个链接：“模态”和“导航到页面”。单击“模态”将打开预览并按预期将 URL 更新为 /news/id。但是，我希望用户能够单击“导航到页面”或“阅读全文”以转到具有相同 URL 结构（/news/id）的完整内容页面，但不会导致硬刷新 \xe2\ x80\x93 当前正在发生，因为我正在使用标签<a>。

我的问题是：我们能否在 Next.js 中对模态视图和全页视图使用相同的 URL 路由，允许用户在简短预览（模态）和完整内容页面之间进行选择，而不需要硬性要求刷新？

我很感激关于这个问题的任何见解或建议。