1

我正在为我的 react 应用程序使用 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>
4

0 回答 0