onEnter prop反应路由器v4

我正在使用react-router v4。我觉得很困惑，当我点击<Link>组件时，路线立即改变。我想在获取数据之前停留在当前路线上，而不是切换路线然后获取数据。我发现在react-router v3有一个onEnter挂钩，但现在在react-router v4，它已被弃用。那么在我点击<Link>组件后，在路由改变之前，我怎么才能获取数据？onEnter prop反应路由器v4

例子：

是：在A - >点击<Link> to B - >为B获取数据 - >渲染B

没有：在A - >点击<Link> to B - >渲染Route B - >获取B的数据 - > rerender B

来源

2017-08-01 ONI AKI

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

但是该建议的方法就是利用component中的lifecycle方法。

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

来源

2017-08-01 06:41:36

我不是故意要取代onEnter。例如，在您的代码中，getData（）可能需要1秒或更多。但是，在数据恢复之前返回。所以你在{Home}并等待数据。我想要做的是在渲染之前获取数据，然后切换到{主页}。 –

@ONIAKI，不幸的是，v4没有这样的功能。在Github的讨论中有几个接近。鼓励使用生命周期挂钩来获取数据 –

这很容易混淆。我理解他们的理念，但它阻止了一些与用户交互的方式。 Em ...我已经使用vue.js和vue-router可以做我刚才说的话。也许我应该考虑在找到一个好的解决方案之前切换到react-router v3。 –

onEnter prop反应路由器v4

回答

相关问题