ReactJS componentWillUnmount不会调用路由更改

我正在使用出色的create-react-app工具来构建应用程序。我的问题与标题所暗示的一样微不足道，但我无法修复它。我已经发表在GitHub上一个最基本的应用来说明：有ReactJS componentWillUnmount不会调用路由更改

https://github.com/diarmuidoconnor/reactdemo

从它的相关摘录如下。

路由配置是：

 <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> 
     ); 
    } 
    });

正如你所看到的，它有componentWillMount和componentWillUnmount生命周期方法。前者在导航到/ bar时调用（localStorage具有正确的值，1表示视图键），但后者不是当我移动到不同的URL时（/） - 视图键的localStorage值未更改为2 ，正如我所料。它仍然是在1

我的环境

OSX 10.9
节点v4.2.2
NPM 2.14.7
的Chrome版本53.0.2785.143

来源

2016-10-20 Diarmuid

请看看[问]。在[所以]我们不写明显的东西，因为他们不需要。我们知道你会感谢任何指导，并感谢你。它是还原剂。 – xenteros

感谢Venugopal，你的回答是正确的。然而，它们在React的设计中略有不一致，因为在手动导航到URL时，新安装的组件的componentWillMount被调用**，但未调用的组件的componentWillUnmount未被调用。 – Diarmuid

@Diarmuid就是这一点。你可以接受答案，如果它解决了你的问题 – Venugopal

我米猜测你正在手动更改网址以在路线之间导航。通过这样做，你不会看到你想要达到的目标。你必须通过应用程序导航来完成。

添加一个包含这两个链接（App和Bar）的标题并使用react的“链接”进行导航。

但在这里我只是添加一个链接到主页在酒吧页面。

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;

这足以检查 'componentWillUnmout' 功能。

来源

2016-10-20 09:03:35 Venugopal

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

如果您直接加载页面或使用锚标记代替链接，它将加载一个新页面，因此不需要取消挂载，因为它相当于首次打开页面。

现在，在你的情况我没有看到任何链接组件，所以你必须打开URL直接因此没有未安装所需

来源

2016-10-20 09:10:58 abhirathore2006

@luboskrnac哪一部分？ – abhirathore2006

ReactJS componentWillUnmount不会调用路由更改

回答

相关问题