Question

问题：

拥有异步路由，从中获取param movie并返回Movie Container（组件）。问题是当我从一个MovieContainer转到另一个MovieContainer（只是相同的路线，但是使用diff.params）时，我的路由器卸载并重新渲染MovieContainer组件。但它应该只是传递新的道具，不要触摸我的组件生命周期。怎么解决？我做错了什么？

代码：

路由器

<Route path="/" component={AppLayout}>
  <IndexRoute components={{ children: Home }} />
  <Route path=":movie/about" getComponents={(nextState, callback) => {
    window.scrollTo(0, 0);
    const movie = findMovie(nextState.params.movie);
    return callback(null, { children: (router) => <Movie movie={movie} router={router} /> });
  }}/>
  ....
</Route>

电影组件中的组件WillMount

  componentWillMount() {
    console.log('MOUNT MovieContainer');
  }

更新好的，做了一些实验。

替换

return callback(null, { children: (router) => <Movie movie={movie} router={router} /> });

使用

return callback(null, Movie);

Andd Movie component没有重新渲染。刚刚更新。这很棒！但是现在如何传递道具？

Answer 1

大！最后我找到了解决方案。

<Route path=":movie/about" getComponents={(nextState, callback) => {
  window.scrollTo(0, 0);
  callback(null, Movie);
}}
/>

在组件中，我可以通过this.props.params.movie访问道具，而不是在构造函数/ componentWillMount const movie = findMovie(nextState.params.movie);中找到影片

React Router重新渲染相同的组件

1 个答案: