React-router: componentWillUnMount is not called when the router changes

[hon]

I am using flux in my project.
I listen and register action in 'componentDidMount' method:

  componentDidMount(){
    //listen
    AddressStore.addInitListener(this._onInit.bind(this));
    AddressStore.addLoadListener(this._onLoad.bind(this));
    AddressStore.addGetListener(this._onGet.bind(this));

    //trigger action in ajax
    Services.Address.fetchInfo({
      init: AddressActions.init,
      load: AddressActions.load
    });
  }

and then remove listener in 'componentWillUnMount':

componentWillUnMount(){
    console.log('unmount'); 
    AddressStore.removeInitListener(this._onInit.bind(this));
    AddressStore.removeLoadListener(this._onLoad.bind(this));
    AddressStore.removeGetListener(this._onGet.bind(this));
  }

But if the url is changed, componentWillUnMount is not called.
Below are the router configrations:

let history = new HashHistory

let router = (
  <Router history={ history }>
    <Route path="/insurance" component={Pages.InsurancePage} />
    <Route path="/cosmetology" component={Pages.CosmetologyPage} />
    <Route path="/service-list" component={Pages.ServiceListPage} />
    <Route path="/pay" component={Pages.PayPage} />
    <Route path="/order-status" component={Pages.OrderStatusPage} />
    <Route path="/address-list" component={Pages.AddressListPage} />
    <Route path="/maintenance" component={Pages.MaintenancePage}>
      <Route path="car-exchange" component={Pages.CarExchangePage} />
    </Route>
    <Route path="/orders" component={Pages.OrdersPage}>
      <Route path="order-details" component={Pages.OrderDetailsPage} >
        <Route path="order-evaluation" component={Pages.orderevaluationPage} />
      </Route>
    </Route>
    <Route path="/packages" component={Pages.PackagesPage} />
    <Route path="/register" component={Pages.RegisterPage}>
      <Route path="register-done" component={Pages.RegisterDonePage} />
    </Route>
    <Route path="/sign" component={Pages.SignPage} />
    <Route path="/single-wash" component={Pages.SingleWashPage} />
    <Route path="/user-center" component={Pages.UserCenterPage}>
      <Route path="car-exchange" component={Pages.CarExchangePage} />
      <Route path="renewal-fee" component={Pages.RenewalFeePage} />
    </Route>
  </Router>
);

React.render(router, document.body);

[mcavaliere]

@hon Did you resolve this problem? I'm having this happen also, without using Flux.

[chrismcv]

I'm pretty sure I'm seeing this too, any solutions would be appreciated...

[knowbody]

the method is componentWillUnmount without capital M, that might be the problem

[mcavaliere]

Sorry, in my case it was spelled correctly. But I resolved the problem, there was a React.render being used inside of a componentDidMount, which is not a good thing. Removing that fixed the issue, and componentWillUnmount fires now.

[alexprice1]

I am not seeing react-router unmount component when the route is a sub-route:

<Router history={history}>
    <Route path="path/:paramId" component={ComponentForRoute} />
</Router>

So even if I switch between path/1 and path/2, componentWillUnmount never gets called for the instance of ComponentForRoute. Any suggestions? Is this how react-router is suppose to work? If so, any suggestions on handling route changes?

[garrettmaring]

Agreed, would love an answer to this! :+1:

[ignu]

should be taken to Stack Overflow, but @alexprice91 @garrettmaring https://github.com/reactjs/react-router/blob/master/docs/guides/ComponentLifecycle.md

[garrettmaring]

Ahh thank you @ignu !

[tobyjsullivan]

Updated link for those of us still struggling with 2.x/3.x: https://github.com/ReactTraining/react-router/blob/800991cd2044293718fccd3763b9d91c2f811296/docs/guides/ComponentLifecycle.md

[oladhari]

i have almost the same trouble with React , the problem is that the top element is App and never get chance to leave or unmount, is there any builtin function that i can call to when I leave the app to another route? thank you for help