React路由导航时componentWillMount/DidMount未触发问题咨询

这个问题我之前也碰到过！核心原因在于React Router的客户端跳转机制——用<Link>跳转时页面不会刷新，你的middleware组件已经挂载在DOM里了，自然不会再触发componentWillMount或componentDidMount这些只会在组件挂载阶段执行的钩子。下面给你两个实用的解决方案：

方案一：类组件用componentDidUpdate监听路由变化 #

首先得让你的middleware组件能拿到路由相关的props，我们可以用withRouter高阶组件来注入路由信息，然后在componentDidUpdate里对比前后的路由地址，一旦变化就执行你的检查逻辑：

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

class Middleware extends React.Component {
  // 初始加载时执行一次逻辑
  componentDidMount() {
    this.runChecks();
  }

  // 监听路由变化，每次路由跳转就重新执行逻辑
  componentDidUpdate(prevProps) {
    if (this.props.location.pathname !== prevProps.location.pathname) {
      this.runChecks();
    }
  }

  // 你的条件检查和函数触发逻辑都放在这里
  runChecks() {
    console.log('执行middleware的检查逻辑');
    // 比如：验证用户权限、加载页面专属数据、触发埋点事件等
  }

  render() {
    // 作为middleware，通常直接渲染子组件即可
    return this.props.children;
  }
}

// 用withRouter包裹组件，才能拿到location等路由props
export default withRouter(Middleware);

方案二：函数组件用useEffect+useLocation监听路由 #

如果你的middleware是函数组件，用React Hooks会更简洁：

import { useLocation } from 'react-router-dom';

function Middleware({ children }) {
  const location = useLocation();

  // 当location变化时，自动执行回调函数
  useEffect(() => {
    runChecks();
  }, [location]); // 依赖项设为location，路由一变就触发

  const runChecks = () => {
    console.log('执行middleware的检查逻辑');
    // 这里写你的条件判断和函数触发代码
  };

  return children;
}

export default Middleware;

额外注意事项 #

• 确保你的middleware组件被包裹在<BrowserRouter>（或其他路由容器）内部，并且放在所有路由组件的上层，这样每次路由跳转都能监听到变化。
• 如果你的middleware是做路由守卫（比如权限拦截），也可以考虑自定义路由组件，但上面的方法更通用，适合全局的middleware场景。

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