Konvertieren mehrerer Konfigurationsrouten in den einfachen Objekten des react-Routers

Question

Ich versuche, etwas wie die folgende Router-Struktur in einfachen Routenobjekten zu erreichen.

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> 

Meine app-Router wie folgt aussieht:

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

Deshalb möchte ich ohne Pfad auf meinem letzten Beispiel die FadeDemo Übergang Behälter aus dem ehemaligen JSX als Route hinzuzufügen. Ist das möglich?

EDIT: Das ist meine aktualisierten Routenindexdatei, ich kann die '/ Zähler' Standort nicht bekommen entsprechen:

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) 
     ] 
    }] 
}) 

Zähler App Index:

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 ist beschrieben, wie Sie es erreichen können.

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