Question

从indexRoute更改为包含路径＆＃39;：topic＆＃39;的路线时，页面保持不变。

我的路线看起来像这样：

ReactDOM.render(
<Provider store={store}>
<Router history={browserHistory}>
  <Route path='/' addHandlerKey={true} component={App}>
    <IndexRoute component={ArticleList} />
    <Route path='/:topic'  component={ArticleList} />
    <Route path='/:id' component={Article} />
  </Route>
</Router>
</Provider>, document.getElementById('app'));

ArticleList看起来像这样：

const _ArticleList = React.createClass({

componentWillMount () {
  this.props.fetchArticles();
},

render () {
  return (
  <div id='ArticleList' className='box'>
     {this.props.articles.map(function (article, i) {
      return <ArticleCard id={article._id} key={i} title={article.title} votes={article.votes} />;
     })}
  </div>
 );
}

当我导航到路线然后刷新页面时，它会更改为我想要的，而不是直接导航到它。

要清楚，url正在改变（感谢App组件）所以params.topic正在改变，但组件没有重新渲染，因此componentWillMount没有被触发。（尝试过componentWillReceiveProps，但这不起作用）

Answer 1

您遇到的问题是，一旦索引页面已加载，组件将已安装并且不会卸载，除非您一起更改为完全不同的路径。您只是更新了一条不会重新触发componentWillMount以再次启动的子路线。

您需要重温componentWillReceiveProps，因为这是执行此操作的正确方法。

类似的东西：

componentWillReceiveProps(nextProps) {
 // in our own app we have acces to routeParams as the :id portion not sure if that works on your app
 // but idea should be if the topic has changed then refetch the articles 


  if (this.props.routeParams !== nextProps.routeParams) {
    this.props.fetchArticles();
  }
}

Answer 2

当我尝试使用conponentWillMount()时，我注意到了同样的行为 - 这是componentWillMount()的拼写错误。

拼写错误没有触发任何警告或错误，当然也没有触发我打算调用的事件。

React - 组件将在更改路径时挂载不被调用？

2 个答案: