kidkarolis / cherrytree-for-react Goto Github PK

Right now a piece of middleware is installed that updates the Router component on transition start. This causes the component to be out of sync with the actual router. The initial app render can be used to demonstrate this:

1. Router component is passed to ReactDOM.render
2. Router.componentWillMount method installs middleware then starts the router
3. Router.render method returns nothing since router has not finished starting (no routes to render)
4. Initial page transition starts, causing middleware to be called
5. Middleware updates Router state, causes re-render
6. Child component renders, tries to read this.context.router.state.routes to get active routes but gets undefined because router is in the middle of a transition.

This is just one example of the inconsistencies; other issues occur if the transition is cancelled (the next state will be rendered upon transition start, but upon cancel won't get reverted to the previous state).

I think this could be solved by using transition.then in the middleware, however we'd have to be careful since if the Router was unmounted mid-transition, we would end up calling setState on an unmounted component.

Tried to install with react 0.14 today and had a peer dependency issue. Used npm 3 to get round it for now.

Right now if you want to provide additional props to a child route you need to clone it, leading to code like this:

class App extends Component {
  render () {
    return (
      <div>
        {React.cloneElement(this.props.children, { anotherProp: 'foo' })}
      </div>
    )
  }
}

It would be much nicer IMO to have a <RouteHandler /> component like they do in react-router:

class App extends Component {
  render () {
    return (
      <div>
        <RouteHandler anotherProp='foo' />
      </div>
    )
  }
}

This should be pretty easy to achieve. The RouteHandler component would look something like this:

class RouteHandler extends Component {
  static childContextTypes = {
    routes: PropTypes.array
  }
  static contextTypes = {
    routes: PropTypes.array
  }

  getChildContext () {
    return {
      routes: routes.slice(1)
    }
  }

  render () {
    return this.context.routes[0]
  }
}

Thoughts @KidkArolis ?