Handling Routing State Across Multiple Containers

[quidmonkey]

Let's say I have a simple App:

    render: function () {
        return (
            <div id="app">
                <Header></Header>
                <Content></Content>
            </div>
        );
    }

Both my header and content need to change based on the current route.

I can think of one way of doing it by creating state containers for each route:

var routes = (
    <Route name="app" handler={App} path="/">
        <Route name="state1" handler={State1} />
        <Route name="state2" handler={State2} />
    </Route>
);

var State1 = React.createClass({
    getInitialState: function () {
        return {
            data: {
                headerthings: 'foo',
                contentthings: 'bar'
            }
        };
    },

    render: function () {
        return (
            <Header things={this.state.data.headerthings} />
            <Content things={this.state.data.contentthings} />
        );
    }
});

But this seems less than ideal, as I'm having to manually manage all the routing state myself. What's the best way to handle this?

[ryanflorence]

#1008