React-Router v4 onEnter wymiany

Question

Obecnie próbuję zbudować prostą aplikację reag-redux, która ma dane studentów i kampusu w backend. OnEnter pracował tutaj, ale nie istnieje w nowym routerze reagowania.

Ta aplikacja próbuje wczytać dane początkowe na początku, zamiast robić element componentDidMount w każdym rzeczywistym komponencie. Czy jest to zalecane podejście, czy też istnieją alternatywne wzorce, o których nie wiem?

/* -------------------< 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

Moje obecne rozwiązanie polega na umieszczeniu dodatkowego kodu w funkcji renderowania, a nie na użyciu właściwości komponentu.

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

Answer 2

Jednym z rozwiązań jest użycie hoc

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

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

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

Answer 3

chcę sugerować nieco innego podejścia. Korzystając z dziedziczenia klas, możesz zaimplementować własny router.

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