Слушатель не удаляется при размонтировании компонента в React

Question

Я построил SPA в activ.js, я использую реактив-маршрутизатор-дом, реакт-редукс и некоторые другие модули.

Я использую реактив-маршрутизатор-дом, и я использую коммутаторкомпонент.

Мои маршруты:

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.

Для этого я обнаружил, что с помощью withRouter могу получить доступ к списку, который обнаруживает изменения URL.Я помещаю это в componentWillMount:

  componentWillMount() {
    this.unlisten = this.props.history.listen((location, action) => {
      console.log("on route change");
      console.log(location)
      console.log(action)
    });
  }

Как только пользователь меняет URL, это срабатывает, что желательно ... но.Допустим, я нахожусь в "/ simulation", и здесь я слушаю любые изменения URL.когда я перехожу в «/ room» код, который находится в componentWillMount в компоненте «/ simulation», выполняется, и теперь я нахожусь на новом URL ...

Проблема : Если бы ятеперь измените с "/ room" на "/ intro", тогда тот же код, который находится в componentWillMount в "/ simulation", будет выполнен снова.

Может кто-нибудь сказать мне, почему?и как остановить его выполнение несколько раз?

Answer 1

Ответ выше верен ... однако я обнаружил проблему с отменой регистрации внутри

componentWillUnmount

Проблема заключалась в том, что код, который я имел в componentWillMount, так и не получил возможности выполнить, так какcomponentWillUnmount было выполнено первым / быстрее.

Итак, я получил следующее:

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

Answer 2

Это может произойти, потому что после размонтирования компонента вы не очищаете прослушиватель истории, вам нужно очистить прослушиватель, когда размонтируется компонент, что вы будете делать в методе componentWillUnmount lifecyle Simulation, как

componentWillUnmount() {
    this.unlisten();
}