在路线更改

时间:2017-07-26 16:25:45

标签: reactjs react-router

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

这是我的代码。

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

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

3 个答案:

答案 0 :(得分:3)

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

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

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

答案 1 :(得分:3)

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

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

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

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

答案 2 :(得分:-1)

如果你需要强行重新安装,显然你做错了什么。一般来说,您应该对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>
  }
}