Javascript NextJS routeChangeComplete不'；t在app.js上触发

下面是我的ReactJS代码片段：

 const LoaderModal = dynamic(
    () => import("~/modal/Loader/Loader"),
    { ssr: false }
 )
     export default class MyApp extends Component {
state={
displayLoader:false
}
componentDidMount(){
    let specificChangeStart= Router.events.on('routeChangeStart', () => {
        console.log("routeChangeStart")
        this.setState({displayLoader:true})
    })
    let specificComplete = Router.events.on('routeChangeComplete', () => {
        console.log("routeChangeComplete")
        this.setState({displayLoader:false})
    })
    let specificError= Router.events.on('routeChangeError',() => {
        console.log("routeChangeError")
        this.setState({displayLoader:false})
    })
}
render(){
    let { Component, pageProps }=this.props
    let {displayLoader}=this.state
      return(
          <LayoutContextProvider >    
              <Component {...pageProps}/>
              {
                  displayLoader &&
                      <LoaderModal/>
              }
          </LayoutContextProvider>
      )
  }
}

const LoaderModal=动态(
（）=>导入（“~/modal/Loader/Loader”），
{ssr:false}
)
导出默认类MyApp扩展组件{
陈述={
显示加载程序：false
}
componentDidMount（）{
让specificChangeStart=Router.events.on（'routeChangeStart'，（）=>{
console.log（“routeChangeStart”）
this.setState（{displayLoader:true}）
})
让specificComplete=Router.events.on（'routeChangeComplete'，（）=>{
控制台日志（“routeChangeComplete”）
this.setState（{displayLoader:false}）
})
让specificError=Router.events.on（'routeChangeError'，（）=>{
console.log（“routeChangeError”）
this.setState（{displayLoader:false}）
})
}
render（）{
设{Component，pageProps}=this.props
让{displayLoader}=this.state
返回(
{
显示加载器&&
}
)
}
}

我正在使用nextjs 9.1.4版

如您所见，路由器的事件存储在componentDidMount（）组件生命周期的阶段。我将它们存储在变量中，以使它们与我的应用程序中的其他声明不同。我也尝试过不分配它们，两种方法都失败了

---

我怎样才能让路由器工作，这里有什么微妙之处吗？

您已经将其设置为变量，而不是仅仅调用（…）上的

Router.events.on

。感谢您的回答@MattCarlotta，正如我所说，“我也尝试过不分配它们，到目前为止，这两种方法都失败了。”请提供一个来自github repo或a的可复制示例。此外，您还说：

我已将它们存储在变量中，以使它们与我的应用程序中的其他声明不同

。为什么？它们被限制在各自的组件中，因此没有必要将它们设置为变量（另外，您还没有调用它们：

specificError（）；

，因此它们从未注册）。另外，当卸载组件时，您是否需要它们？例如，

Router.events.off（'routeChangeStart'，…）

？一个工作示例应该有助于回答这些问题。@MattCarlotta感谢您提供的信息。我将在接下来的二十分钟内提供一个github repo。您已将其设置为变量，而不仅仅是调用（…）。感谢您的回答@MattCarlotta，正如我所说，“我也尝试过，但没有分配它们，两种方法都失败了。”请提供一个来自github repo或，您说过：

我将它们存储在变量中，以使它们与我的应用程序中的其他声明不同

。为什么？它们被限制在各自的组件中，因此没有必要将它们设置为变量（另外，您还没有调用它们：

specificError（）；

，因此它们从未注册）。另外，当卸载组件时，您是否需要它们？例如，

Router.events.off（'routeChangeStart'，…）

？一个工作示例应该有助于回答这些问题。@MattCarlotta感谢您提供的信息。我将在接下来的二十分钟内提供github回购协议。