javascript - 在react-router的普通对象中转换多个配置路由

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 转换容器添加为在后一个示例中没有路径的路由。这可能吗？

编辑: 这是我更新的路线索引文件，现在我无法匹配“/counter”位置:

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

过渡包装器

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
        }
        // ...
      ]
    },
  ]
})