Nested layouts

[coniel]

I'm building an app that has a main layout, and then several different areas which have their own 'sub layout' (nested inside the main layout) and then further 'sub layouts'. For example something like

// Group discussion view
<AppLayout>
    <GroupLayout >
        <DiscussionsLayout >
            <Discussion />
        </DiscussionsLayout >
    </GroupLayout >
</AppLayout>

// Group event view
<AppLayout>
    <GroupLayout >
        <CalendarLayout >
            <Event />
        </CalendarLayout >
    </GroupLayout >
</AppLayout>

I've managed to get this working easily by doing something like:

GroupLayout = React.createClass({
    render () {
        var self = this;
        var groupLayout = function () {
            return (
                <div>
                    <h1>Group</h1>
                    {self.props.content()}
                </div>
            )
        }

        return (
            <AppLayout content={groupLayout} />
        )
    }
});

// Similar thing for the discussions layout
...

and then I render it the normal way:

ReactLayout.render(DiscussionsLayout, {
    content() {
        return <Discussion />;
    }
});

This works, however, if I navigate from say .../discussions/:id (which renders <Discussion /> inside DiscussionsLayout) to .../discussions (which renders <DiscussionsList /> inside DiscussionsLayout), all of the layout components (AppLayout, GroupLayout...) get re-rendered. As opposed to doing something like:

React.render(<AppLayout></AppLayout>, document.body);
// Then when a user enters a group
React.render(<GroupLayout></GroupLayout>, document.getElementById("app-content"));
// When a user goes to .../discussions
React.render(<DiscussionsLayout><DiscussionsList /></DiscussionsLayout>, document.getElementById("group-content"));
// When a user goes to .../discussions/:id
React.render(<Discussion />, document.getElementById("discussions-content"));

This way only the template is rendered when a user navigates to .../discussions/:id, and the templates are not re-rendered.

I was wondering if there is a way to achieve something similar with ReactLayout? Basically the ability to render a component into an already rendered component.