React中window.addEventListener hashchange仅初始加载生效问题排查

这个问题我之前开发React路由应用时也碰到过，咱们一步步拆解问题所在，再给你可行的解决办法：

你的代码存在两个核心问题 #

1. 事件处理函数传递错误
   你在addEventListener里直接写了console.log("changed")，这会导致组件挂载时立刻执行这个打印语句，而不是把函数引用传递给事件监听器。正确的写法应该是传递一个函数，比如() => console.log("changed")。

2. 事件类型不匹配
   你用的是hashchange事件，但你的路由是通过history.push更新的——这说明你使用的是BrowserRouter（基于HTML5 History API的路由模式），而非HashRouter。hashchange仅会在URL的哈希部分（#后的内容）变化时触发，而BrowserRouter的URL修改不会涉及哈希，所以这个事件根本不会被触发。

推荐解决方案：利用React Router的生命周期/ Hooks监听路由变化 #

React Router本身提供了更可靠的路由变化监听方式，能覆盖包括编程式导航（比如你用的history.push）在内的所有场景：

方案1：类组件（你的场景） #

如果你的组件是被Route直接渲染的，或者用withRouter高阶组件包裹，会自动接收到location props。你可以通过componentDidUpdate对比前后的location来检测URL变化：

import React from 'react';
import { withRouter } from 'react-router-dom';

class SearchUsers extends React.Component {
  componentDidMount() {
    // 组件初始加载时执行一次逻辑
    this.handleUrlChange(this.props.location);
  }

  componentDidUpdate(prevProps) {
    // 对比前后location，判断URL是否更新
    if (this.props.location !== prevProps.location) {
      this.handleUrlChange(this.props.location);
    }
  }

  handleUrlChange = (location) => {
    // 解析搜索参数，执行你的业务逻辑
    const searchParams = new URLSearchParams(location.search);
    const searchQuery = searchParams.get('q');
    console.log('URL已更新，搜索关键词：', searchQuery);
    // 这里写你需要执行的指定函数
  }

  render() {
    return (
      // 你的页面内容
    );
  }
}

// 如果组件没有直接接收到location props，需要用withRouter包裹
export default withRouter(SearchUsers);

方案2：函数组件（拓展参考） #

如果以后迁移到函数组件，可以用useLocation Hook配合useEffect实现监听：

import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function SearchUsers() {
  const location = useLocation();

  useEffect(() => {
    // URL变化时执行逻辑
    const searchParams = new URLSearchParams(location.search);
    const searchQuery = searchParams.get('q');
    console.log('URL已更新，搜索关键词：', searchQuery);
    // 执行你的指定函数
  }, [location]); // 依赖location，每次location变化时触发

  return (
    // 你的页面内容
  );
}

export default SearchUsers;

为什么不推荐原生事件？ #

如果尝试用popstate原生事件，它仅会在用户点击浏览器前进/后退按钮时触发，编程式的history.push/replace不会触发该事件，所以无法覆盖你的场景。React Router提供的方案才是适配所有路由变化场景的最优解。

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