S. Schenk S. Schenk - 3 months ago 57
React JSX Question

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

I'm trying to achieve something like the 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 like this:

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


So I want to add the FadeDemo transition container from the former JSX as a route without a path on my latter example. Is that possible?

EDIT:
That's my updated route index file, now I get can't match the '/counter' location:

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


counter 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

Here is described how you 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
        }
        // ...
      ]
    },
  ]
})
Comments