使用react-router v3在create-react-app中进行代码拆分

Question

我正在使用create-react-app样板来为我的反应应用程序和react-router 3.0.0版本进行路由。

我想在需要时加载组件，即基本上是代码拆分。

我被困住，因为我不知道如何进行代码拆分，因为我有一个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>