React-Router v4 onEnterの置き換え

Question

私は現在、バックエンドに生徒とキャンパスのデータを持つ単純なreact-reduxアプリケーションを構築しようとしています。 OnEnterはここで働いていましたが、新しい反応ルータには存在しません。

このアプリケーションは、実際の各コンポーネントでcomponentDidMountを実行する代わりに、初期データを最初に読み込もうとします。それが推奨されるアプローチですか、それとも私が気づいていない代替パターンがありますか？

/* -------------------< COMPONENT >------------------- */ 
import React from 'react'; 

import { BrowserRouter as Router, Route } from 'react-router-dom'; 
import Home from './components/Home'; 
import Students from './components/Students'; 

const Routes = ({ getInitialData }) => { 
    return (
    <Router> 
     <div> 
     <Route exact path="/" component={Home} onEnter={getInitialData} /> 
     <Route path="/students" component={Students} /> 
     <Route path="*" component={Home} /> 
     </div> 
    </Router> 
); 
}; 

/* -------------------< CONTAINER >-------------------- */ 

import { connect } from 'react-redux'; 
import receiveStudents from './reducers/student'; 
import receiveCampuses from './reducers/campus'; 

const mapState = null; 
const mapDispatch = dispatch => ({ 
    getInitialData:() => { 
    dispatch(receiveStudents()); 
    dispatch(receiveCampuses()); 
    } 
}); 

export default connect(mapState, mapDispatch)(Routes); 

Answer 1

私の現在のソリューションは、機能をレンダリングし、コンポーネントのプロパティを使用しないで余分なコードを置くことです。

<Route exact path="/" render={() => { 
    getInitialData(); 
    return <Home />; 
} } /> 

Answer 2

一つの解決策は、私は少し異なるアプローチを提案したいHOC

function preCondition(condition, WrappedComponent) { 
    return class extends Component { 
    componentWillMount{ 
      condition() 
    } 

     render() { 
      <WrappedComponent {...this.props} /> 
     } 
    } 
} 

<Route exact path="/" component={preCondition(getInitialData, Home)} /> 

Answer 3

を使用することです。クラスの継承を使用すると、独自のルータを実装できます。

import {Redirect, Route} from 'react-router'; 



/** 
* Class representing a route that checks if user is logged in. 
* @extends Route 
*/ 
class AuthRequiredRoute extends Route{ 
    /** 
    * @example <AuthRequiredRoute path="/" component={Products}> 
    */ 
    render() { 
     // call some method/function that will validate if user is logged in 
     if(!loggedIn()){ 
      return <Redirect to="/login"></Redirect> 
     }else{ 
      return <this.props.component /> 
     } 
    } 
}