baobab-react with react-router >=1.0

[hansman]

rooting-our-top-level-componen describes how to root a top level component.

ReactDom.render(
    require('baobab-react/higher-order').root(tree, App), 
    elem
)

With react-router >= 1.0, top level components are rendered however similar to this

ReactDom.render(
    <Router history={appHistory}>...</Router>,
    elem
)

What is the suggested pattern to use react-baobab with react-router >=1.0?

Applying the mixin pattern (mixins.root and mixins.branch) for rooting the baobab doesn't seem to work with react-router >=1.0 either.

[Yomguithereal]

Just create a Rooted component by applying the higher-order function to your top component and pass this rooted component as a child to the router and it should work.

[hansman]

Thanks @Yomguithereal. Using higer-order I run into a problem with the types. Please see my code below.

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of BranchedComponent.
Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of BranchedComponent.

ReactDom.render(
    <Router history={appHistory}>
        <Route path='/' component={HigherOrder.root(App, tree)}>
            <Route path='my' component={MyBranchedSection}/>
        </Route>
    </Router>
, elem);

var App = React.createClass({
    render: function() {
        return (
            <div>
                {this.props.children}
            </div>
        );
    }
});

var MySection = React.createClass({
    contextTypes: {
        tree: PropTypes.baobab,
        cursors: React.PropTypes.object
    },

    render: function() {
        return (<div>mysection</div>);
    }

}
module.exports = HigherOrder.branch({
    myCursor1: ['myCursor1'],
    myCursor2: ['myCursor2'],
}, MySection);

[Yomguithereal]

One thing I am unclear about is whether one can use higher order functions on the result of the React.createClass. I will make some tests. In the meanwhile, can you try to use the mixin instead or use ES6 classes or pure function components and see whether this changes anything?

[Yomguithereal]

Doesn't seem to be the issue. However, I notice that you wrote this in your code:

HigherOrder.root(App, tree)

Try reversing it to:

HigherOrder.root(tree, App)

[hansman]

Reversing does not help (Uncaught Error: baobab-react:higher-order.root: given tree is not a Baobab.). I think the function signature changed at some point? running baobab-react 2.1.1 ..

[Yomguithereal]

The current signature of the root function is root(tree, Component (code here). So it seems that the tree you provide is not a baobab tree. One thing you can also check is if you have the Baobab dep more than once in your deps because if the one used by the higher order function is not the same as the one from which you got your tree, it might cause issues.

[hansman]

Spot on. In fact I had an apparently uncompatible version of baobab in my node-modules. Running now baobab@2.1.1 with baobab-react@2.1.1. No further issues, thanks for the reply.

[Yomguithereal]

I am happy it worked @hansman. It makes me think I should rollback to identity checking rather than checking the class instance in my tests for a Baobab tree. This would avoid this kind of problems.