Basic React-Router 1.0 App with Child Component Issue

Question

In the process of upgrading to React-Router 1, I am no longer able to view any child routes. What is causing going to /about to show the same thing as going to / in the below sample code?

import React from 'react/addons';
import {Route, Router} from 'react-router';

var App = React.createClass({
    render: function() {
        console.log(this.props.children);

        return (
            <div id='app'>
                Testing!
                {this.props.children}
            </div>
        );
    }
});

var About = React.createClass({
    render: function() {
        return (
            <h1>About</h1>
        );
    }
});

React.render((
    <Router>
        <Route path='/' component={App}>
            <Route path='/about' component={About} />
        </Route>
    </Router>
), document.body);

Answer 1

As it turns out, the routes are still there, but behind a hash, so going to /#/about would work. To get around this, first modify the above code to:

import history from './history';
import React from 'react/addons';
import {Route, Router} from 'react-router';

var App = React.createClass({
    render: function() {
        console.log(this.props.children);

        return (
            <div id='app'>
                Testing!
                {this.props.children}
            </div>
        );
    }
});

var About = React.createClass({
    render: function() {
        return (
            <h1>About</h1>
        );
    }
});

React.render((
    <Router history={history}>
        <Route path='/' component={App}>
            <Route path='/about' component={About} />
        </Route>
    </Router>
), document.body);

And create a history.js file with this:

import createBrowserHistory from 'history/lib/createBrowserHistory';

export default createBrowserHistory();

This requires the npm history package. With the history and the code changes, the routes should work.

Credit to this answer for helping realize the issue.