Question

如果在两条路线上使用相同的组件，如何在路线更换时重新安装组件？

这是我的代码。

routes.jsx

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

我在Home的{{1}}组件中进行了条件检查，相应地呈现了JSX。

fooId

目前，当点击<Link to="/foo/1234">fooKey</Link>时，路线发生变化，重新触发Home组件中的渲染功能，但不再重新安装。

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

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

Answer 1

因此，每次查询字符串更改时，您都不会想要卸载并重新装入组件。将您的路线更改为：

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

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

Answer 2

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

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

key={Date.now()}这个关键属性会强制每次重新安装。

注意： componentWillReceiveProps 是反应中的坏消息。

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

在路线更改

3 个答案: