Next.js 路由器对某些页面上的浏览器后退按钮没有反应

Question

我遇到了浏览器后退按钮打开时难以调查的错误https://gart.gallery。

\n

https://gart.gallery/artworks/例如，如果您转到\n然后转到任何艺术品，https://gart.gallery/artworks/my-place/然后单击浏览器的向后\xe2\x80\x93\xe2\x80\x93，URL 将被替换，/artworks但不会呈现新页面。

\n

我的调试尝试：

\n

\n
1. const Artwork = () => <p>Artwork page</p>如果页面行为保持不变，则它与页面内容 \xe2\x80\x93 无关
\n
2. 它与页面文件结构无关
\n

\n

   pages/arworks/index.tsx\n   pages/arworks/[slug]/index.tsx\n   // everything is usual\n

\n

\n
3. next.js 能够正常工作，因为/events/art-dubai/并可以/events正确地在浏览器中后退/前进
\n
4. /events/[slug]我尝试但徒劳地找到了正常工作和/arworks/[slug]页面之间的区别/artworks。此外，我尝试用最简单的组件替换它们，只需 a<p>或Link\xe2\x80\x93 行为保持不变。
\n
5. 此错误实际上仅适用于arworks/[slug] => artworks，galleries/[slug] => galleries但artists/[slug] => artists不适用于/events/[slug] => /events。奇怪，我看不出有什么共同点或区别
\n
6. 我注意到，当我在有问题的页面上向后单击时，next.js 路由器不会触发该事件，而在导航每个其他页面时会触发该事件。我订阅了_app.tsx以下活动：
\n

\n

   function handleStart(...props) {\n     console.log(\'start \', JSON.stringify(props));\n     start(\'ROUTER\', 0);\n   }\n   function handleStop(...props) {\n     console.log(\'complete \', JSON.stringify(props));\n     finish(\'ROUTER\', 500);\n   }\n   router.events.on(\'routeChangeStart\', handleStart);\n   router.events.on(\'routeChangeComplete\', handleStop);\n

\n

如果有帮助的话，我可以提供任何需要的配置或文件。

\n

我不希望得到最终的解决方案，但如果有人能指导我如何思考/调试这个问题，我将非常感激。

\n

更新：

\n

如果我在简单的 ... \xe2\x80\x93 上更改 NextLink，它会导航到艺术品，并且浏览器向后可以正常工作！所以问题已经定位：是使用NextLink的问题。但仍然不清楚为什么通过 NextLink 导航的页面由于 URL 已更改而不会触发路由器重新渲染组件。由于文档，我使用下一个链接：

\n

<NextLink\n  passHref\n  href="/artworks/[slug]"\n  as={`/artworks/${product.slug}`}\n/>\n  <a>...</a>\n</NextLink>\n

\n

删除passHref或仅使用href属性 \xe2\x80\x93 对错误没有影响。

\n