如何在 Next JS 中创建进度条？
How to create a progress bar in Next JS?
我正在尝试创建一个进度条，它位于网站的最顶部，每次加载页面时，您都会看到进度条填满。
我想在 Next JS 中实现相同的功能，但我很难做到。加载栏有很多库，但它们都需要一个 value 道具，它基本上表示栏已填充多少，但我找不到动态获取此 value 道具的方法。我不想对其进行硬编码，我希望它在页面加载时填满。
有什么方法可以动态地找到 value 属性的值吗？
有几种方法可以做到这一点，nextjs 具有路由器导入功能，因此您可以使用事件 see here
考虑到这一点，您可以创建可视化组件，如果您真的想在每次页面更改时显示，您可以将其与 _app.tsx/jsx 和 useEffect 挂钩一起使用。只是不要忘记在听完事件后清理事件
很好地展示了如何实现它，它是一个很好的参考并且非常通用，因此您可以根据需要进行自定义
尝试 __app.js 或 __app.tsx
从 'next/router' 导入路由器；
从 'nprogress' 导入 NProgress；
在头部添加 css
Router.events.on('routeChangeStart', () => NProgress.start());
Router.events.on('routeChangeComplete', () => NProgress.done());
Router.events.on('routeChangeError', () => NProgress.done());
会工作
我正在尝试创建一个进度条，它位于网站的最顶部，每次加载页面时，您都会看到进度条填满。
我想在 Next JS 中实现相同的功能，但我很难做到。加载栏有很多库，但它们都需要一个 value 道具，它基本上表示栏已填充多少，但我找不到动态获取此 value 道具的方法。我不想对其进行硬编码，我希望它在页面加载时填满。
有什么方法可以动态地找到 value 属性的值吗？
有几种方法可以做到这一点，nextjs 具有路由器导入功能，因此您可以使用事件 see here
考虑到这一点，您可以创建可视化组件，如果您真的想在每次页面更改时显示，您可以将其与 _app.tsx/jsx 和 useEffect 挂钩一起使用。只是不要忘记在听完事件后清理事件
尝试 __app.js 或 __app.tsx 从 'next/router' 导入路由器； 从 'nprogress' 导入 NProgress； 在头部添加 css
Router.events.on('routeChangeStart', () => NProgress.start()); Router.events.on('routeChangeComplete', () => NProgress.done()); Router.events.on('routeChangeError', () => NProgress.done());
会工作