Change nested component with react-router

Question

I am using react to build a single page app with a static sidebar and dynamic main content area.

Using react router, I have displayed a standalone login box at the root route then display the "app" (sidebar + content area) at the /dashboard route.

How can I use react-router to change the content area, while leaving the header and sidebar as-is?

For example, I'd like /channel/21 to be the "app" view with the content area replaced with the feed for channel 21.

Here are my routes as they stand:

var routes = (
    <Route name="app" path="/" handler={require('./components/app')}>
        <DefaultRoute handler={require('./components/loginPage')} />
        <Route name="dashboard" handler={require('./components/container')} />
        <NotFoundRoute handler={require('./components/notFoundPage')} />
    </Route>
);

loginPage is, of course, the lone login box. container is the shell for the app that looks like this:

var Container = React.createClass({
render: function() {
    return (
        <div className="col-sm-12 main-container">
            <div className="row headerBar">
                <div className="col-sm-12">
                    <div>Header area</div>
                </div>
            </div>
            <div className="row contentArea">
                <div className="col-sm-3">
                    <div>Left nav area</div>
                </div>
                <div className="col-sm-9">
                    <div>content Area</div>
                </div>
            </div>
            <div className="row footerArea">
                <div className="col-sm-12">
                    <div>Footer area</div>
                </div>
            </div>
        </div>
    );
}
});

Answer 1

I think what you're looking for is the Route "path"

so your route will look something like this:

<Route name=”Dashboard” handler={Container}>
   <Route path=”:id” handler={Channel}/>
</Route>

and in your Channel, here's what it looks like

‘use strict’;
var React = require(‘react’),
    Router = require(‘react-router’);
var Channel = React.createClass({
    //mixins: [Router.State],
    render: function() {
    return (
       <div>this is channel with ID:
          {this.props.params.id} //get id using this
       </div>
       );
    }
});
module.exports = Channel;

this is how you register the router

Router.run(Routes, function(Handler, state) {
    React.render(<Handler params={state.params}/>, document.body);
});

here's an example you can take a look at:

https://github.com/proclaim/React-Router-Example/tree/master/src/app

hope this helps!