NextJS routeChangeComplete不会在_app.js上触发

Question

这是我的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>
      )
  }
}

我正在使用nextjs版本9.1.4。

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

我如何使路由器工作，这里有什么要微妙之处吗？