반응 라우터 인증 비동기

Question

반응이 처음이에요.

나는 내 routes.js에서 구현 내 비동기-경로에 몇 가지 보안을 추가 할 다음 "/ 인사/: foo는"당신이 볼 수 있듯이

import React from 'react'; 
import App from './app.jsx'; 
import Home from './components/home.jsx'; 

import {Router, Route, IndexRoute, hashHistory} from 'react-router'; 

function loadRoute(cb) { 
    return (module) => cb(null, module.default); 
} 

const routes = { 
    component: App, 
    childRoutes: [ 
     { 
      path: "/", 
      component: Home 
     }, 
     { 
      path: "/hello/:foo", 
      getComponent(location, cb) { 
       System.import('./components/hello.jsx') 
        .then(loadRoute(cb)) 
        .catch(errorLoading); 
       } 
     }, 
    ] 
}; 

export default() => <Router history={hashHistory} routes={routes} /> 

경로가 비동기입니다.

어떻게이 경로 (역할 기반)에 대한 액세스를 제한하고 다른 위치 (예 : 로그인)로 리디렉션 할 수 있습니까?

필요할 때만 청크를로드하려고합니다.

"getComponent()"에 점검 코드를 넣어야합니까?

"willTransitionTo()"로 수행 할 수 있습니까? "getComponent()"이전에이 함수가 실행되고 구현해야합니까?

Answer 1

체크 코드를 componentWillMount()에 넣고 render()에서 페이지 구성 요소를 반환하거나 로그인/표시로 리디렉션합니다.

액세스가 제한되어있는 페이지가 여러 개있는 경우 각 페이지 구성 요소가 렌더링 전에 액세스를 확인할 수 있도록 상위 수준의 구성 요소 순서를 만듭니다.