Code Splitting in create-react-app using react-router v3

438 views Asked by At

i am using create-react-app boilerplate for my react app and react-router 3.0.0 version for routing.

I wanted to load component when required i.e basically code splitting.

I am stuck as i don't know how to do code splitting, as i have one HOC with check for User Roles, if user don't have role for a specific route, than i redirect the user to some 'unauthorised' route.

I also have onEnter function which needs to be called before loading any component, which will check if user token is expired or not, if token is expired i am redirecting the user to login page.

so if someone can help me with code splitting in this scenario.

Below is my Route.js file

      <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>
0

There are 0 answers