javascript - Converting multiple configuration routes in react-router's plain objects -

i'm trying achieve following router structure in plain route objects.

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> 

my app router looks this:

export const createroutes = (store) => ({   path: '/',   component: corelayout,   indexroute: home,   childroutes: [     counterroute(store)   ] }) 

so want add fadedemo transition container former jsx route without path on latter example. possible?

edit: that's updated route index file, can't match '/counter' location:

import corelayout '../layouts/corelayout/corelayout' import home './home' import counterroute './counter' import transitionwrapper './transitionwrapper'  export const createroutes = (store) => ({   path: '/',   component: corelayout,   indexroute: home,   childroutes: [{     //path: 'fade',     component: transitionwrapper,     childroutes: [       counterroute(store)       ]   }] }) 

counter app index:

import { injectreducer } '../../store/reducers'  export default (store) => ({   path: 'counter',   /*  async getcomponent invoked when route matches   */   getcomponent (nextstate, cb) {     /*  webpack - use 'require.ensure' create split point         , embed async module loader (jsonp) when bundling   */     require.ensure([], (require) => {       /*  webpack - use require callback define           dependencies bundling   */       const counter = require('./containers/countercontainer').default       const reducer = require('./modules/counter').default        /*  add reducer store on key 'counter'  */       injectreducer(store, { key: 'counter', reducer })        /*  return getcomponent   */       cb(null, counter)      /* webpack named bundle   */     }, 'counter')   } }) 

transitionwrapper

import react 'react' import { link } 'react-router'  import { routetransition } '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 

here described how can achieve it.

export const createroutes = (store) => ({   path: '/',   component: corelayout,   indexroute: home,   childroutes: [     {       component: fadedemo,       childroutes: [         {           path: 'demo-1',           component: lorem         },         {           path: 'demo-2',           component: lorem         }         // ...       ]     },   ] })