Next.js动态路由下nprogress加载条不触发问题求助

针对你在使用slug动态路由切换分类时加载条不显示的问题，结合你提供的代码，以下是可行的解决方案：

核心问题 #

控制台isAnimating状态正常切换，但加载条未显示，本质是@tanem/react-nprogress的内部状态没有在路由重复切换时正确重置——当isAnimating从false再次变为true时，组件内部仍保留上一次动画的isFinished状态，导致动画无法重启。

解决方案1：强制重置Progress组件（最直接有效） #

给Progress组件添加key属性，每次isAnimating状态变化时强制组件重新挂载，让useNProgress从头初始化动画：

修改app.tsx中的Progress渲染代码：

<Progress isAnimating={isAnimating} key={isAnimating} />

解决方案2：优化useNProgress配置（增强动画稳定性） #

在progress.tsx中给useNProgress添加基础配置，确保动画能正确触发并显示：

const { animationDuration, isFinished, progress } = useNProgress({
  isAnimating,
  minimum: 0.08, // 设置初始最小进度，避免加载条完全不可见
  trickle: true, // 开启自动递增进度
  trickleSpeed: 200 // 进度递增速度（毫秒）
});

解决方案3：修复Bar组件的过渡属性 #

原bar.tsx中的transition属性缺少单位且语法不严谨，修改为：

style={{
  marginLeft: `${(-1 + progress) * 100}%`,
  transition: `margin-left ${animationDuration}ms linear`
}}

验证效果 #

修改后切换动态路由时，Progress组件会随isAnimating状态重新挂载，useNProgress会重新启动动画流程，加载条就能正常显示了。

内容的提问来源于stack exchange，提问作者Jamie Garcia