在路由更改时反应力重新安装组件

Question

当对两个路由使用相同的组件时，如何在路由更改时重新安装组件？

这是我的代码。

routes.jsx

<Router history={browserHistory}>
  <Route path="/" component={Home} />
  <Route path="/foo/:fooId" component={Home} />
</Router>

我在Home 组件中对fooId 进行了条件检查，从而相应地呈现 JSX。

<Link to="/foo/1234">fooKey</Link>

此时，当点击fooKey 时，路由发生变化，Home 组件中的渲染功能被重新触发，但没有再次挂载。

我查看了提到componentWillReceiveProps 的其他答案，但我在constructor 中有很多配置，我不想将所有这些配置移动到componentWillReceiveProps。

如果需要更多信息，请发表评论。

Answer 1

如果您需要在每个路由匹配上强制重新安装组件，您可以通过 key 属性来实现它，除非您知道自己在做什么：

<Route
  exact
  path={'some path'}
  render={props => <RemountAlways key={Date.now()} {...props} />}
/>

key={Date.now()}这个key属性每次都会强制react重新挂载。

注意： componentWillReceiveProps 在 react 中是个坏消息。

Answer 2

因此，您不会希望在每次查询字符串更改时卸载和重新安装组件。将您的路线更改为：

<Router history={browserHistory}>
  <Route path="/" component={Home} />
</Router>

用 React Router 提供的 withRouter HoC 包裹你的 <Home /> 组件。完成此操作后，({ match, history, location }) 将在 <Home /> 组件中可用。在您的 componentWillRecieveProps 生命周期挂钩中，您可以执行任何需要 props.location.search 上的查询字符串来产生所需结果的逻辑。

Answer 3

如果您需要强制重新安装，显然您做错了什么。一般来说，你应该对componentWillReceiveProps做出反应：

class DumbComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = this.propsToState(this.props);
  }

  componentWillReceiveProps(nextProps) {
    this.setState(this.propsToState(nextProps));
  }

  propsToState(props) {
    // place all of your state initialization dependent logic here
    return {
      foo: props.foo,
    };
  }

  render() {
    return <div>{this.state.foo}</div>
  }
}