react-router 필요 에 따라 불 러 오기

본 논문 에서 사용 하 는 React-router 버 전 은 2.8.1 이다.
React Router 는 필요 에 따라 솔 루 션 을 불 러 오고 코드 를 여러 개의 작은 가방 으로 나 누 어 탐색 과정 에서 필요 에 따라 불 러 옵 니 다.
프로젝트 에 웹 팩 패키지 도 구 를 조합 했다 면 웹 팩.config.js 의 output 에 chunk Filename 을 추가 해 야 합 니 다.

output: {
  path: path.join(__dirname, '/../dist/assets'),
  filename: 'app.js',
  publicPath: defaultSettings.publicPath,
  //    chunkFilename
  chunkFilename: '[name].[chunkhash:5].chunk.js',
},

name 은 코드 에 chunk 가 지정 한 이름 을 만 드 는 것 입 니 다.코드 에 지정 되 지 않 으 면 webpack 은 기본적으로 id 번 호 를 name 으로 할당 합 니 다.
chunkhash 는 파일 의 hash 코드 입 니 다.hash 코드 가 비교적 길 기 때문에 여 기 는 다섯 자리 만 가 져 옵 니 다.
구성 요 소 를 동적 으로 불 러 올 필요 가 있 습 니 다.component 를 getComponent 로 바 꿔 야 합 니 다.우선 루트 를 뜯 어서 루트 루트 루트 를 만 듭 니 다.

const rootRoute = {
 path: '/',
 indexRoute: {
  getComponent(nextState, cb) {
   require.ensure([], (require) => {
    cb(null, require('components/layer/HomePage'))
   }, 'HomePage')
  },
 },
 getComponent(nextState, cb) {
  require.ensure([], (require) => {
   cb(null, require('components/Main'))
  }, 'Main')
 },
 childRoutes: [
  require('./routes/baidu'),
  require('./routes/404'),
  require('./routes/redirect')
 ]
}

ReactDOM.render(
 (
  <Router
   history={browserHistory}
   routes={rootRoute}
   />
 ), document.getElementById('root')
);

여기에 네 개의 속성 이 있 습 니 다:
path
더 이상 말 할 필요 도 없 이 경로 와 일치 합 니 다.
getComponent
이전 component 속성 에 대응 하지만 이 방법 은 비동기 적 입 니 다.즉,길이 일치 할 때 만 이 방법 을 사용 할 수 있 습 니 다.
이 안에 require.ensure 방법 이 있어 요.

require.ensure(dependencies, callback, chunkName)

이것 은 웹 팩 이 제공 하 는 방법 이자 필요 에 따라 불 러 오 는 핵심 방법 입 니 다.첫 번 째 매개 변 수 는 의존 입 니 다.두 번 째 는 반전 함수 입 니 다.세 번 째 는 위 에서 언급 한 chunk Name 입 니 다.이 chunk file 의 name 을 지정 합 니 다.
indexRoute
홈 페이지 설정 에 사용 합 니 다.홈 페이지
이 곳 의 indexRoute 쓰기 에 주의 하 십시오.이것 은 대상 입 니 다.대상 에서 getComponent 를 사용 합 니 다.
childRoutes
하위 경로
이 안에 설 치 된 것 은 하위 경로 의 설정 으로 예전 의 하위 경로 들 에 대응 합 니 다.우 리 는 이전의/baidu,/404 와*를 모두 뜯 어 낸 다음 에 각각 경로 설정 을 만 들 것 입 니 다.
경로 제어
위의 child Routes 에서,우 리 는 세 개의 하위 루트 를 필요 로 합 니 다.디 렉 터 리 아래 루트 디 렉 터 리 를 만 들 고,이 세 개의 루트 를 넣 습 니 다.

routes/
├── 404
│  └── index.js
├── baidu
│  ├── index.js
│  └── routes
│    ├── frequency
│    │  └── index.js
│    └── result
│      └── index.js
└── redirect
  └── index.js

rootRoute 와 유사 합 니 다.모든 index.js 는 하나의 경로 대상 입 니 다.
/404/index.js

module.exports = {
 path: '404',

 getComponent(nextState, cb) {
  require.ensure([], (require) => {
   cb(null, require('components/layer/NotFoundPage'))
  }, 'NotFoundPage')
 }
}

/baidu/index.js

module.exports = {
 path: 'baidu',

 getChildRoutes(partialNextState, cb) {
  require.ensure([], (require) => {
   cb(null, [
    require('./routes/result'),
    require('./routes/frequency')
   ])
  })
 },

 getComponent(nextState, cb) {
  require.ensure([], (require) => {
   cb(null, require('components/layer/BaiduPage'))
  }, 'BaiduPage')
 }
}

/baidu/routes/frequency/index.js

module.exports = {
 path: 'frequency',
 getComponent(nextState, cb) {
  require.ensure([], (require) => {
   cb(null, require('components/layer/BaiduFrequencyPage'))
  }, 'BaiduFrequencyPage')
 }
}

등.................................................................
리 다 이 렉 트 설정 을 말씀 드 리 겠 습 니 다.
우 리 는 이 방향 을 바 꾸 는 길 을 단독으로 뜯 어야 한다.즉,*이 길 은 우리 위 에 이미 그 를 위해 redirect 디 렉 터 리 를 만 들 었 다.여기 서 onEnter 방법 을 사용 한 다음 에 이 방법 에서 경로 상 태 를 바 꾸 고 다른 경로 로 이동 하여 redirect 를 실현 합 니 다.
/redirect/index.js 공식 예

module.exports = {
 path: '*',
 onEnter: (_, replaceState) => replaceState(null, "/404")
}

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.