Question

我正在尝试在普通路由对象中实现类似以下路由器结构的东西。

#productGrid .k-link {
    color: #FFFFFF !important;
}

我的应用路由器如下所示：

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>

所以我想将前JSX中的FadeDemo过渡容器添加为后一个示例中没有路径的路由。这可能吗？

编辑：那是我更新的路线索引文件，现在我得不到'/ counter'位置：

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

计数器app index：

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

TransitionWrapper

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

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

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

1 个答案: