反応ルータv4のonEnter小道

Question

私はreact-router v4を使用しています。 <Link>コンポーネントをクリックすると、ルートがただちに変更されることがわかります。私はデータをフェッチする前に現在のルートに留まり、ルートを切り替えずにデータをフェッチします。 react-router v3にはonEnterフックがありますが、現在はreact-router v4になっていますが、廃止予定です。では、<Link>コンポーネントをクリックした後、ルートが変更される直前にデータを取得するにはどうすればよいですか？

例：

それはです：Aで - - >Bのためのデータをフェッチする - >B

ないレンダリング><Link> to Bでクリックしてください：Aで - ><Link> to Bでクリック - >Route Bをレンダリング - >Bのデータを取得する - >再レンダリングB

Answer 1

react-router v4には、から小道具が

react-router v3に既存のonEnterの機能を置き換えるために、あなたがreact-router v4でこれの等価が

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

しかし提案された方法だろうreact-router v3

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

でのようなルートを持っていると仮定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) 
    } 
}