反応ルータv3を使用したcreate-react-appでのコード分割

Question

私は、反応アプリケーションと反応ルータ3.0.0バージョンをルーティングするためにcreate-react-appボイラープレートを使用しています。

私は、必要なときに基本的にコード分割を行うためにコンポーネントをロードしたかったのです。

ユーザースプリットを行う方法がわからないので固執しています。特定のルートの役割を持っていないユーザーの場合は、ユーザーの役割を確認するHOCが1つあります。無許可のルート。

コンポーネントを読み込む前に呼び出す必要があるonEnter関数もあります。これは、ユーザートークンが期限切れかどうかをチェックします。トークンが期限切れになっていると、ユーザーをログインページにリダイレクトしています。

だから、誰かがこのシナリオでコードの分割を手伝ってくれたら助かります。

以下

は私Route.jsファイル

 <Route path="/" component={App}> 
     <IndexRoute onEnter={this.handleLoginRedirect} component={Login} /> 
     <Route path="/" component={Layout} onEnter={this.handleRouteEnter} onChange={this.handleRouteChange}> 
      <Route path="admin" component={Authorization(Admin, Constant.AdminAuthorizeRoles, '/unauthorised')}> 
      <Route path=":mode/:id" component={Admin}> 
       <Route exact path=":subMode" component={Admin}/> 
      </Route> 
      </Route> 
      <Route path="admin-summary" component={Authorization(AdminOrderSummary, Constant.AdminAuthorizeRoles, '/unauthorised')}/> 
      <Route path="user-profile" component={Authorization(Profile, Constant.userProfileAuthorizeRole, '/unauthorised')}/> 
      <Route path="new-user" component={Authorization(NewUser, Constant.createNewUserProfileAuthorizeRole, '/unauthorised')}/> 
      <Route path="/unauthorised" component={UnAuthorisation}/> 
     </Route> 
     <Route path="/logout" component={Logout}/> 
     </Route> 

Answer 1

である（以降1.0から）CRAで作成したアプリのコード分割を実装するための最も簡単な方法は、dynamic import featureを使用することです。コード分​​割用にはtutorialがすばらしく、反応ルータv4用ですので、少し変更する必要があります。動的インポートおよび非同期コンポーネントラッパーで

/* Import the components */ 
import Home from "./containers/Home"; 

/* Use components to define routes */ 
export default() => 
    <Switch> 
    <Route path="/" exact component={Home} /> 
    </Switch>; 

：

によって使用される通常の構造は、ルータに反応

asyncComponent：

import React, { Component } from "react"; 

export default function asyncComponent(importComponent) { 
    class AsyncComponent extends Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
     component: null 
     }; 
    } 

    async componentDidMount() { 
     const { default: component } = await importComponent(); 

     this.setState({ 
     component: component 
     }); 
    } 

    render() { 
     const C = this.state.component; 

     return C ? <C {...this.props} /> : null; 
    } 
    } 

    return AsyncComponent; 
} 

ルート：

import asyncComponent from "./components/AsyncComponent"; 
const AsyncHome = asyncComponent(() => import("./containers/Home")); 

export default() => 
    <Switch> 
    <Route path="/" exact component={AsyncHome} /> 
    </Switch>;