Question

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

示例：

它是：A - ＆gt;点击<Link> to B - ＆gt;获取B - ＆gt;的数据渲染B

not：at A - ＆gt;点击<Link> to B - ＆gt;渲染Route B - ＆gt;获取B - ＆gt;的数据重新渲染B

Answer 1

在react-router v4中，您可以使用render支持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 discussion ：

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

onEtern prop in react-router v4

1 个答案: