无需硬刷新即可导航到 Next.js 13 中拦截的路由

Question

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

\n

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

\n

我想要的行为如下：

\n

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

\n

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

\n

更新：

\n

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

\n

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

\n

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

\n

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

\n

Answer 1

你有一个有效的例子吗？

您是否想让/news/page.jsx页面提供一张卡片，单击时会打开：

• 模态/@modal/(.)news/[id]/page.jsx 或：
• 将您链接到/news/[id]/page.jsx

使用模态，您可以在拦截后执行以下操作以返回：

const router = useRouter()

  const onDismiss = useCallback(() => {
    router.back()
  }, [router])

在/@modal/(.)news/[id]/page.jsx你可以渲染这个：

<Modal>
   <NewsPreview data={data} />
</Modal>

在/news/page.jsx呈现所有新闻的地方，您可以对每条新闻使用 next<Link>和 a 。href={id}

在您的中，layout.jsx您可以有条件地渲染插槽，或者如果您想渲染其他内容，则@modal可以创建一个新插槽。（我想您可以使用布局中已@news包含的内容。props.children/news/[id]/page.jsx

希望这可以帮助。