React-Router 1.0.0beta3 sub link not working properly - reactjs

Question

While there are no errors being reported, the Example page is not appearing after clicking on "Go to Example Page".
But, if I do not make the Example route a sub-route to Main, the Example Page works but I no longer have the Main Page as a Header.
Can anyone see where my error is?
Using:
"react": "^0.14.0-beta2",
"react-dom": "^0.14.0-beta2",
"react-router": "^1.0.0-beta3"
// Bootstrapping module
import React, {Component} from 'react';
import ReactDom from 'react-dom';
import { history } from 'react-router/lib/BrowserHistory';
import Routes from 'routes';
let rootEl = document.getElementById('content');
ReactDom.render(<Routes history={history} />, rootEl);
//Routes.js
import React, { PropTypes, Component } from 'react';
import { Router, Route, Link } from 'react-router';
import Main from 'components/main';
import Example from 'components/example.js';
export default class Routes extends Component {
static propTypes = {
history: PropTypes.object.isRequired
}
render() {
const { history } = this.props;
return (
<Router history={history}>
<Route path="/" component={Main}>
<Route path="/example" component={Example}>
</Route>
</Route>
</Router>
);
}
}
//Example.js
import React from 'react';
import connectToStores from 'alt/utils/connectToStores';
import DummyStore from 'stores/dummyStore';
import DummyActions from 'actions/dummyActions';
#connectToStores
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
name: props.name
}
}
static getStores(props) {
return [DummyStore];
}
static getPropsFromStores(props) {
return DummyStore.getState();
}
render() {
return (
<div>
<input type="text" value={this.state.name} onChange={this.onChange}/>
<h1>On example Page: {this.props.name}</h1>
</div>
);
}
onChange = evt => {
this.setState({name: evt.target.value});
DummyActions.updateName(evt.target.value);
}
}
export default Example;

Answer 1

I found the solution, but I want to add first I am very concerned about the documentation for react-router, not to mention react in general. It seems as if the react framework and related enhancements as so fluid, one can not grasp any cohesive understanding of the framework for the long term.
Here is the solution, it requires a change in the Main Component to include children props:
class Main extends React.Component {
render() {
return (
<div>
<h1>Main Top Header</h1>
<Link to='example'>Go to the Example page...</Link>
{this.props.children} <--- solution
</div>
);
}
}
Note:
As of today, and that is about as good as it gets because this framework is way too fluid for my liking, when you have nested routes, the parent route must include {this.props.children} in the component class.
But, it appears, that in the world of react, this could all be invalid tomorrow!!