반응 라우터의 일반 오브젝트에서 다중 구성 라우트 변환

Question

일반 라우트 오브젝트에서 다음 라우터 구조와 같은 것을 구현하려고합니다.

const Demo =() => (
    <Router history={hashHistory}> 
    <Route path="/" component={App}> 
     <Route path="fade" component={FadeDemo}> 
     <IndexRoute component={Lorem} /> 
     <Route path="demo-1" component={Lorem} /> 
     <Route path="demo-2" component={Lorem} /> 
     <Route path="demo-3" component={Lorem} /> 
     </Route> 

내 애플 라우터는 다음과 같습니다

export const createRoutes = (store) => ({ 
    path: '/', 
    component: CoreLayout, 
    indexRoute: Home, 
    childRoutes: [ 
    CounterRoute(store) 
    ] 
}) 

그래서 내가 후자의 예에 경로없이 경로로 이전 JSX에서 FadeDemo 전이 컨테이너를 추가 할. 그게 가능하니?

편집 : 제 아들이에요 업데이트 경로 인덱스 파일, 지금은 '/ 카운터'위치 일치하지 않을 수 있습니다 얻을 :

import CoreLayout from '../layouts/CoreLayout/CoreLayout' 
import Home from './Home' 
import CounterRoute from './Counter' 
import TransitionWrapper from './TransitionWrapper' 

export const createRoutes = (store) => ({ 
    path: '/', 
    component: CoreLayout, 
    indexRoute: Home, 
    childRoutes: [{ 
    //path: 'fade', 
    component: TransitionWrapper, 
    childRoutes: [ 
     CounterRoute(store) 
     ] 
    }] 
}) 

카운터 응용 지수 :

import { injectReducer } from '../../store/reducers' 

export default (store) => ({ 
    path: 'counter', 
    /* Async getComponent is only invoked when route matches */ 
    getComponent (nextState, cb) { 
    /* Webpack - use 'require.ensure' to create a split point 
     and embed an async module loader (jsonp) when bundling */ 
    require.ensure([], (require) => { 
     /* Webpack - use require callback to define 
      dependencies for bundling */ 
     const Counter = require('./containers/CounterContainer').default 
     const reducer = require('./modules/counter').default 

     /* Add the reducer to the store on key 'counter' */ 
     injectReducer(store, { key: 'counter', reducer }) 

     /* Return getComponent */ 
     cb(null, Counter) 

    /* Webpack named bundle */ 
    }, 'counter') 
    } 
}) 

TransitionWrapper

을

import React from 'react' 
import { Link } from 'react-router' 

import { RouteTransition } from 'react-router-transition' 

const TransitionWrapper = (props) => (
    <div> 
    <RouteTransition 
     component={"div"} 
     className="transition-wrapper" 
     pathname={this.props.location.pathname} 
     {...props.preset} 
    > 
     {this.props.children} 
    </RouteTransition> 
    </div> 
) 

export default TransitionWrapper 

Answer 1

Here 어떻게 달성 할 수 있는지 설명합니다.

export const createRoutes = (store) => ({ 
    path: '/', 
    component: CoreLayout, 
    indexRoute: Home, 
    childRoutes: [ 
    { 
     component: FadeDemo, 
     childRoutes: [ 
     { 
      path: 'demo-1', 
      component: Lorem 
     }, 
     { 
      path: 'demo-2', 
      component: Lorem 
     } 
     // ... 
     ] 
    }, 
    ] 
})