javascript 在Next.js 13中,如何使用链接导航来导航离开被拦截的路线?

ukdjmx9f  于 2023-05-21  发布在  Java
关注(0)|答案(1)|浏览(175)

免责声明:* 我最初在Next.js github仓库中使用filed this as a bug,但它没有被认为是一个问题,并被立即关闭。给出的解释/解决方案对我不起作用,所以这意味着我一定做错了什么,因此这里的问题。
问题/问题

我有一个demo app(codesandbox源代码here),它使用了两个Next.js路由功能:Parallel routesroute interceptors
简而言之,点击照片会将URL从/更改为/photos/[id],但除非您重新加载页面,否则照片将以模态显示在前一个路线视图的顶部,而不是完全将页面更改为照片详细信息页面,这很简洁。
单击模式覆盖调用router.back()函数,这会让我们在历史堆栈中后退一步,URL更改为/,并且不再显示照片模式,正如预期的那样。
现在,我已经结束了一个场景,在这个场景中,我需要能够使用实际的Link组件而不是调用router.back()来导航模式。这意味着用户应该能够单击指向远离/photos/[id]的链接,URL应该更改为链接指向的位置,并且模态应该消失。
但是,正如您在演示中看到的那样,情况并非如此。
相反,用户单击指向远离/photos/[id]的链接,URL更改为链接指向的位置,但模态保持不变。即使您点击了将您带到完全不相关的页面的链接,您也可以观察到这种行为。
最初我认为问题可能是Link组件,并试图用类似于

<button
      className="action"
      onClick={() => {
        router.push(`/`);
      }}
    >
      Close
    </button>

但它仍然不起作用。似乎调用router.push('/')与调用router.back()的工作方式有所不同,尽管两者都会导致URL更改为/
如果这是某种故意的行为,那就真的很奇怪了,因为除了违反直觉之外,文档本身读起来
如果模态是通过客户端导航启动的,例如通过使用,您可以通过调用router.back()或使用Link组件来关闭模式。(资料来源)
加粗的部分才是真正让我不爽的地方。
正如关于这个问题的评论中所建议的,我尝试了[...catchAll]路由的解决方案;我试着把它从app/移到app/@modal/再移到app/@modal/(..)photos/,看看它在哪个目录下能像描述的那样工作,结果没有工作。
那么,这是一个错误,还是我严重误用和误解了路由器和路由器拦截的工作方式?
如果是后者,你如何让Link导航从拦截的路线工作?
谢谢

gcuhipw9

gcuhipw91#

事实证明,这实际上是Next.js的一个问题,我提交的最初关闭的工单被重新打开(请参阅问题免责声明中的GitHub问题报告链接)。应在Next.js的下一个补丁版本更新中修复

相关问题