Next.js类组件中如何检测URL参数变化？

方案1：使用Next.js Router API修改URL（推荐） #

直接用Next.js内置Router修改URL，而非原生window.history.pushState，路由变化会被自动追踪，类组件可通过生命周期钩子检测参数变化。

步骤： #

1. 更新component1.js的URL修改逻辑：

// component1.js
import { withRouter } from 'next/router';
import React from 'react';

class Component1 extends React.Component {
  handleUpdateURL = () => {
    this.props.router.push(
      { pathname: '/watch', query: { id: '2' } },
      undefined,
      { shallow: true } // 启用shallow模式，避免页面刷新
    );
  };

  render() {
    return <button onClick={this.handleUpdateURL}>更新ID</button>;
  }
}

export default withRouter(Component1);

2. 在component2.js中监听参数变化：
   通过componentDidUpdate对比前后路由的查询参数：

// component2.js
import { withRouter } from 'next/router';
import React from 'react';

class Component2 extends React.Component {
  componentDidUpdate(prevProps) {
    if (prevProps.router.query.id !== this.props.router.query.id) {
      console.log("Change in parameter detected");
      // 执行参数变化后的业务逻辑
    }
  }

  render() {
    return <div>当前ID: {this.props.router.query.id}</div>;
  }
}

export default withRouter(Component2);

方案2：保留原生window.history.pushState的处理方式 #

若必须使用原生pushState，由于该方法不会触发popstate事件，需手动补充触发逻辑：

方法A：派发自定义事件 #

1. 修改component1.js的pushState逻辑：

// component1.js
const newURL = "/watch?id=2";
window.history.pushState(null, null, newURL);
// 派发自定义事件通知参数变化
window.dispatchEvent(new CustomEvent('urlParamChange'));

2. 在component2.js中监听事件：

// component2.js
import React from 'react';

class Component2 extends React.Component {
  componentDidMount() {
    // 监听自定义事件和浏览器前进/后退的popstate事件
    window.addEventListener('urlParamChange', this.handleParamChange);
    window.addEventListener('popstate', this.handleParamChange);
  }

  componentWillUnmount() {
    // 移除监听，防止内存泄漏
    window.removeEventListener('urlParamChange', this.handleParamChange);
    window.removeEventListener('popstate', this.handleParamChange);
  }

  handleParamChange = () => {
    const urlParams = new URLSearchParams(window.location.search);
    const currentId = urlParams.get('id');
    console.log("Change in parameter detected, current ID:", currentId);
    // 执行后续逻辑
  };

  render() {
    return <div>Component 2</div>;
  }
}

export default Component2;

方法B：主动更新Next.js Router #

调用pushState后手动通知Router更新状态，之后可复用方案1的检测逻辑：

// component1.js
import Router from 'next/router';

const newURL = "/watch?id=2";
window.history.pushState(null, null, newURL);
// 手动触发Router的路由完成事件
Router.events.emit('routeChangeComplete', window.location.href);

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