在Next.js中放置与Router.events相关的代码的位置

import React, { Component } from 'react';
import { Router } from 'next/router';

class MyPage extends Component {
  componentDidMount() {
    Router.events.on('routeChangeStart', this.handleRouteChangeStart);
    Router.events.on('routeChangeComplete', this.handleRouteChangeComplete);
  }

  componentWillUnmount() {
    Router.events.off('routeChangeStart', this.handleRouteChangeStart);
    Router.events.off('routeChangeComplete', this.handleRouteChangeComplete);
  }

  handleRouteChangeStart = (url) => {
    // 处理路由变化开始事件
  }

  handleRouteChangeComplete = (url) => {
    // 处理路由变化完成事件
  }

  render() {
    return (
      <div>
        {/* 页面内容 */}
      </div>
    );
  }
}

export default MyPage;

import App from 'next/app';
import { Router } from 'next/router';

class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    // 订阅Router.events相关事件
    Router.events.on('routeChangeStart', handleRouteChangeStart);
    Router.events.on('routeChangeComplete', handleRouteChangeComplete);

    let pageProps = {};
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    return { pageProps };
  }

  componentWillUnmount() {
    // 取消订阅Router.events相关事件
    Router.events.off('routeChangeStart', handleRouteChangeStart);
    Router.events.off('routeChangeComplete', handleRouteChangeComplete);
  }

  render() {
    const { Component, pageProps } = this.props;
    return <Component {...pageProps} />;
  }
}

export default MyApp;