私は現在、学生とキャンパスのデータをバックエンドに持つ単純な反応還元アプリを構築しようとしています。 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);
私の現在の解決策は、コンポーネントのプロパティを使用せずに、レンダリング関数に余分なコードを配置することです。
<Route exact path="/" render={() => {
getInitialData();
return <Home />;
} } />
私は少し異なるアプローチを提案したいと思います。クラス継承を使用すると、独自のルーターを実装できます。
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 />
}
}
}
1つの解決策は、HOCを使用することです
function preCondition(condition, WrappedComponent) {
return class extends Component {
componentWillMount{
condition()
}
render() {
<WrappedComponent {...this.props} />
}
}
}
<Route exact path="/" component={preCondition(getInitialData, Home )} />
import React, { Component } from 'react';
import { Route, Redirect } from 'react-router-dom';
class LoginRoute extends Component{
render() {
const isLogin = () => {
if () {
return true;
}
return false;
}
if(!isLogin()){
return <Redirect to="/login"></Redirect>
}else{
return <Route path={this.props.path} exact component={this.props.component} />
}
}
}
export default LoginRoute;