React-Router v4：路由切换前如何为组件执行逻辑？

嘿，我来帮你搞定这个问题！首先得先指出你代码里的两个小错误，这可能也是部分问题的根源：

1. 你添加的事件监听名称写错了：应该是beforeunload，不是onbeforeunload；
2. 你把componentWillUnmount写成了componentWillMount——前者才是组件卸载时触发的生命周期方法，用来清理监听器刚好合适，而后者是组件挂载前执行的，完全不符合你的需求。

接下来针对React-Router v4中路由切换时的逻辑执行问题，给你几个可行的方案：

如果你的组件不是直接被<Route>组件渲染的，它就不会自动获取到路由相关的props（比如location），这时候就需要用withRouter把组件包裹起来，这样就能拿到路由状态，进而监听路由变化。

修改后的代码示例：

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

class Example extends React.Component {
  handlePageExit = () => {
    console.log("Leaving page...");
  }

  componentDidMount() {
    // 纠正事件名：beforeunload
    window.addEventListener("beforeunload", this.handlePageExit);
  }

  componentDidUpdate(prevProps) {
    // 对比前后的location，判断是否发生了路由切换
    if (this.props.location.pathname !== prevProps.location.pathname) {
      console.log("导航到新路由了！");
      // 在这里执行你需要的逻辑，比如移除监听器
      window.removeEventListener("beforeunload", this.handlePageExit);
      // 其他你想执行的清理或业务逻辑都可以放在这里
    }
  }

  componentWillUnmount() {
    // 组件卸载时务必清理监听器，防止内存泄漏
    window.removeEventListener("beforeunload", this.handlePageExit);
  }

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

// 用withRouter包裹组件，注入路由相关props
export default withRouter(Example);

如果你的组件是通过<Route path="/your-page" component={Example} />这种方式直接渲染的，那当路由切换离开这个路径时，组件会被自动卸载，componentWillUnmount方法就会触发——这时候你只需要把清理逻辑（比如移除监听器）放在这个方法里就行。

如果这个方法没触发，那大概率是你的路由结构有问题：比如组件被放在了<Switch>外面，或者用了嵌套路由但组件始终不会被卸载。这时候需要检查你的路由配置，确保路由切换时目标组件会被卸载。

如果你需要在用户导航离开前弹出确认提示，或者在用户确认后执行逻辑，可以用React-Router提供的Prompt组件：

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

class Example extends React.Component {
  handlePageExit = () => {
    console.log("Leaving page...");
    window.removeEventListener("beforeunload", this.handlePageExit);
  }

  componentDidMount() {
    window.addEventListener("beforeunload", this.handlePageExit);
  }

  componentWillUnmount() {
    window.removeEventListener("beforeunload", this.handlePageExit);
  }

  render() {
    return (
      <>
        <Prompt
          message={(location) => {
            // 导航前先执行你的逻辑
            this.handlePageExit();
            // 返回true允许导航；如果需要拦截，返回字符串会弹出确认框
            return true;
          }}
        />
        <div />
      </>
    );
  }
}

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