路由更改时未调用ReactJS组件WillUnmount

我正在使用优秀的CreateReact应用程序工具构建一个应用程序。我的问题正如标题所暗示的那样微不足道，但我无法解决它。我在github上发布了一个裸体应用程序，以说明：

有关摘录如下

路由配置为：

     <Router history={browserHistory} >
        <Route path="/" component={App}>
           <IndexRoute component={Foo}/>
           <Route path="bar" component={Bar} />
        </Route>
      </Router>

条形码组件代码为：

 var Bar = React.createClass({
      componentWillUnmount: function() {
         localStorage.setItem('view', 2) ;
      },
      componentWillMount: function() {
           console.log('mounting') ;
          localStorage.setItem('view', 1) ;

       },

    render: function(){
         return (  
          <div>
            <h1>Bar </h1>
          </div>
        );
    }
  });

var Bar=React.createClass({
componentWillUnmount:function（）{
setItem（'view'，2）；
},
componentWillMount:function（）{
控制台日志（“安装”）；
setItem（'view'，1）；
},
render:function（）{
报税表（
酒吧
);
}
});

如您所见，它有componentWillMount和componentWillUnmount生命周期方法。前者在我导航到/bar时调用（localStorage具有视图键的正确值1），但后者在我移动到其他URL（/）时不会调用-视图键的localStorage值没有如我所预期的那样更改为2。现在仍然是1点

我的环境

• OSX 10.9
• 节点v4.2.2
• npm 2.14.7
• Chrome版本53.0.2785.143

---

我猜您正在手动更改url以在路由之间导航。这样做，你就看不到你想要实现什么。您必须通过应用程序导航来完成

添加带有这两个链接（应用程序和工具栏）的标题，并使用react的“链接”进行导航

但在这里，我只是在bar页面中添加一个到主页的链接

import React from 'react';
import { IndexLink } from 'react-router';

var Bar = React.createClass({
    componentWillUnmount: function() {
        console.log('unmounting') ;
        localStorage.setItem('view', 2) ;
    },
    componentWillMount: function() {
        console.log('mounting') ;
        localStorage.setItem('view', 1) ;
     },
     render: function(){
         return (
             <div>
             <h1>Bar </h1>
             <IndexLink to="/" activeClassName="active">Home</IndexLink>
         </div>
     );
  }
});

export default Bar;

从“React”导入React；
从“react router”导入{IndexLink}；
var Bar=React.createClass({
componentWillUnmount:function（）{
console.log（“卸载”）；
setItem（'view'，2）；
},
componentWillMount:function（）{
控制台日志（“安装”）；
setItem（'view'，1）；
},
render:function（）{
返回(
酒吧
家
);
}
});
导出默认栏；

---

这足以检查“componentWillUnmount”功能。

当不再需要某个组件时，将调用componentWillUnmount函数，如果您更改路由并且该组件在新路由上也是必需的，那么它将不会卸载

如果您直接加载一个页面或使用锚定标记而不是链接，它将加载一个新页面，因此不需要卸载，因为这相当于第一次打开页面

---

现在在您的情况下，我没有看到任何链接组件，因此您必须直接打开URL，因此无需卸载

请查看。我们不写明显的东西，因为它们不需要。我们知道，您将感谢任何指导，并表示感谢。这是reduntant。谢谢Venugopal，你的回答是正确的。但是，它们在React的设计中有点不一致，例如，当您手动导航到URL时，会调用新装入组件的componentWillMount，但不会调用已装入组件的componentWillUnmount。@Diarmuid这就是问题所在。如果答案解决了你的问题，你可以接受problem@luboskrnac哪一部分？我确认React unmount仅在使用路由器标签/API更改状态时才进行