반응 라우터 v3를 사용하여 create-react-app에서 코드 분할

Question

나는 라우팅을 위해 반응 앱과 반응 라우터 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

(이후 1.0) CRA로 만든 응용 프로그램 코드 분할을 구현하는 가장 쉬운 방법은 파일입니다 dynamic import feature을 사용하는 것입니다. 코드 분할 용으로는 tutorial이 좋습니다. 이는 반응 라우터 v4 용이므로 약간 변경해야합니다.

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 the components */ 
import Home from "./containers/Home"; 

/* Use components to define routes */ 
export default() => 
    <Switch> 
    <Route path="/" exact component={Home} /> 
    </Switch>; 

: 라우터 반응에서 사용

일반적인 구조

import asyncComponent from "./components/AsyncComponent"; 
const AsyncHome = asyncComponent(() => import("./containers/Home")); 

export default() => 
    <Switch> 
    <Route path="/" exact component={AsyncHome} /> 
    </Switch>;