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>