使用react-router v3在create-react-app中分割代碼

Question

我正在爲我的反應應用和react-router 3.0.0版本的路由使用create-react-app樣板。

我想在需要時加載組件，即基本上是代碼分割。

我被卡住了，因爲我不知道如何做代碼拆分，因爲我有一個HOC檢查用戶角色，如果用戶沒有特定路線的角色，比我重定向用戶到一些'未經授權的路線。

我也有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

實現與CRA創建（從1.0起）的應用程序代碼分裂的最簡單方法是使用dynamic import feature。代碼拆分有很大的tutorial，它是用於react-router 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>;