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

回答

相關問題