onEtern prop in react-router v4

Question

我正在使用react-router v4.我发现令人困惑的是,当我点击<Link>组件时,路线会立即改变.我想在获取数据之前保持当前路由,而不是切换路由然后获取数据.我发现react-router v3有一个onEnter钩子,但现在react-router v4,它已被弃用.那么如何在点击<Link>组件之后和路由更改之前立即获取数据？

例:

它是:at A- >点击<Link> to B- >获取数据B- >渲染B

不:在A- >点击<Link> to B- >渲染Route B- >获取数据B- >重新渲染B

Answer 1

在react-router v4,您可以使用renderprop Route来替换onEnter现有的功能react-router v3

假设你有一条像这样的路线 react-router v3

<Route path="/" component={Home} onEnter={getData} />

这的等效react-router v4会

<Route exact path="/" render= {() => {getData(); return <Home data={this.state.data}/>}} />

但是建议的方法是利用lifecycle方法中的方法component.

来自Github的讨论:

We have no lifecycle hooks that receive props on initial render.

我们不再拥有"路线生命周期".相反,由于<Match> 组件是真实组件(不是像s那样的伪组件),因此它们可以参与React的生命周期,这意味着它们可以使用componentWillMount.

所以建议的解决方案之一是:

v4是关于仅作为组件的路由.这意味着利用生命周期方法.

componentWillMount() { // or componentDidMount
  fetch(this.props.match.params.id)
}

componentWillReceiveProps(nextProps) { // or componentDidUpdate
  if (nextProps.match.params.id !== this.props.match.params.id) {
    fetch(nextProps.match.params.id)
  }
}