Javascript 在React中卸载组件时未删除侦听器

我在react.js中构建了一个SPA，我正在使用react路由器dom、react redux和其他一些模块

我正在使用react路由器dom和交换机组件

我的路线：

const allRoutes = [
    {
      path: "/Intro",
      name: "Intro",
      component: Intro
    },
    {
      path: "/Room",
      name: "Room",
      component: Room
    },
    {
      path: "/Simulation",
      name: "Simulation",
      component: Simulation
    },
    {
      path: "/Cartypes",
      name: "Cartypes",
      component: CarTypes
    },
    {
      path: "/StartPosition",
      name: "StartPosition",
      component: StartPosition
    },
    {
      path: "/Movment",
      name: "Movment",
      component: Movment
    },
    { redirect: true, path: "/", to: "/Intro", name: "Intro" }
  ];

  export default allRoutes;

我如何渲染它们

          <Switch>
              {routes.map((prop, key) => {
                if (prop.redirect)
                    return <Redirect from={prop.path} to={prop.to} key={key} />;
                return (
                  <Route path={prop.path} component={prop.component} key={key} />
                );

              })}
          </Switch>

一旦用户更改了url，就会触发已取消的url…但是。 假设我在“/simulation”，这就是我监听url更改的地方。当我移动到“/room”时，component中的代码将装载在执行的“/simulation”组件中，现在我在一个新的url上

问题：如果我现在将从“/room”更改为“/intro”，那么组件中的相同代码将在“/simulation”下再次执行

---

谁能告诉我为什么？如何阻止它多次执行

这种情况会发生，因为一旦组件卸载，您就没有清除历史侦听器，您需要在组件卸载时清除侦听器，您将在

componentWillUnmount

lifecycle方法的

Simulation

中执行类似操作

componentWillUnmount() {
    this.unlisten();
}

---

上面的答案是正确的…但是我发现在

componentWillUnmount

问题是我在

componentWillMount

中拥有的代码从未得到执行的机会，因为

componentWillUnmount

首先执行/更快

因此，我得出以下结论：

  componentWillMount() {
    this.unlisten = this.props.history.listen((location, action) => {
      // execute my code
      this.unlisten(); // unregister the listner. 
    });
  }

---

这是如此简单和逻辑，我不敢相信我没有想到它。非常感谢。

  componentWillMount() {
    this.unlisten = this.props.history.listen((location, action) => {
      // execute my code
      this.unlisten(); // unregister the listner. 
    });
  }