Not sure how to send the transition container to the router

[sschenk]

I'm working with dave zuko's react redux starter kit and I'm trying to apply some router transitions. If I understand correctly I should wrap my component with a transitions container and send the wrapped component to my router.

From the demo:

const SlideRightDemo = props => (
  <RouteTransitionDemo preset={presets.slideRight} {...props} />
);

const Demo = () => (
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      <Route path="slideright" component={SlideRightDemo}>

Here's the router index file and a component route index:

import CoreLayout from '../layouts/CoreLayout/CoreLayout'
import Home from './Home'
import CounterRoute from './Counter'

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

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

[maisano]

@sschenk–did you get this resolved?

[sschenk]

No the following gives me can't match location error:

  path: '/',
  component: CoreLayout,
  indexRoute: Home,
  childRoutes: [{
    component: TransitionWrapper,
    childRoutes: [
      CounterRoute(store)
      ]
  }]
})

Edit:

So actually above code matches the route but yields a "Warning: Failed prop type: Required prop children was not specified in CoreLayout."

[maisano]

@sschenk what does TransitionWrapper look like in your case? also, i just merged another demo which showcases a simpler usage of RouteTranstion. take a look at the demo and see if it helps at all.

[sschenk]

It ended up being an annoying silly mistake with my plain route definitions. I added a component key in my nested child routes and that's why my transition wrapper route wasn't picked at all:

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

The question should have probably been asked in the react-router repo. since it's really about the router defs.

EDIT:
Actually it's still not working, TransitionWrapper is being called now (I stuck a console.log to make sure) but doesn't render anything.
I keep The transitionwrapper very simple and just used a div with this.props.children to see if it renders and it doesn't. Also the components underneath it are rendered fine (even if I take out ths.props.children) So I'm guessing they are not really nested under the transitionwrapper.

Anyway I guess I won't reopen the issue as it's more of a router issue, although an example of plain nested routes with two levels of nested children would be nice. Having plain routes and an app layout is probably a very popular use case.

[maisano]

@sschenk are you passing anything to the pathname of RouteTransition?

[sschenk]

The problem is not with your repo. I just can't seem to create the following router structure using the react-redux starter repo:

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

I've tried making the transition wrapper a simple <div>{this.props.children}</div> and it still wouldn't render. It get's stuck at CoreLayout and complains about not having any children even though it's nested in the router.
I've opned a stack overflow question without much luck so far, but it has all my relevant files there: http://stackoverflow.com/questions/38861108/nesting-child-routes-within-another-child-route

Regarding the path: I've tried with null and "/" on another vanilla react and (just with react-router-transition dependencies) and there were no animations going back to index route.
I think the use case of having transition animation component that needs it's own path ("fade/mypath") are non existing. and the path prop should be an extra at best.