时间戳

首页 > 解决方案 > Next.js 路由器对某些页面上的浏览器后退按钮没有反应

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

问题描述

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

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

我的调试尝试：

  1. 它与页面内容无关——如果页面是const Artwork = () => <p>Artwork page</p>行为保持不变
  2. 它与页面文件结构无关
   pages/arworks/index.tsx
   pages/arworks/[slug]/index.tsx
   // everything is usual
  1. next.js 能够正常工作，因为/events/art-dubai/并/events在浏览器中正确地向后/向前导航
  2. 我尝试但徒劳地找到/events/[slug]正确工作/arworks/[slug]的页面和/artworks页面之间的区别。此外，我尝试用最简单的组件替换它们，只需要一个<p>或Link- 行为保持不变。
  3. 此错误实际上仅适用于arworks/[slug] => artworks，galleries/[slug] => galleries但artists/[slug] => artists不适用于/events/[slug] => /events. 奇怪，我看不出有什么共同点或有什么不同
  4. 我注意到，当我在有问题的页面上向后单击并在所有其他页面上导航时，next.js 路由器不会触发事件。我订阅了_app.tsx以下事件：
   function handleStart(...props) {
     console.log('start ', JSON.stringify(props));
     start('ROUTER', 0);
   }
   function handleStop(...props) {
     console.log('complete ', JSON.stringify(props));
     finish('ROUTER', 500);
   }
   router.events.on('routeChangeStart', handleStart);
   router.events.on('routeChangeComplete', handleStop);

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

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

更新：

如果我将 NextLink 更改为简单 ... – 它会导航到艺术品，然后浏览器向后正常工作！所以问题已经本地化了：是使用 NextLink 的问题。但是仍然不清楚为什么通过 NextLink 导航的页面由于 URL 已更改而不会触发路由器重新渲染组件。由于文档，我使用 Next 链接：

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

删除passHref或仅使用一个href属性——对错误没有影响。

标签： javascriptreactjsnext.js

解决方案

推荐阅读