Simple React router not working - react-router

Question

Can't for the life of me get a simple react-router to work! It displays the first page, but when I click the link it doesn't do anything but change the url to /home. It keeps showing "app". Why is the home component not loading???
Simple code:
import React from 'react';
import { Link } from 'react-router'
import { render } from 'react-dom'
import { Router, Route } from 'react-router'
class App extends React.Component {
render() {
return (
<div><Link to="/home">app</Link></div>
);
}
}
class Home extends React.Component {
render() {
return (
<div>Honey, I'm home!!!</div>
);
}
}
render(
<Router>
<Route path="/" component={App}>
<Route path="home" component={Home}/>
</Route>
</Router>,
document.getElementById('tempoot')
)

Answer 1

Because you haven't told it to render Home anywhere. You need to do something like (core thing you are missing is {this.props.children}):
import React from 'react';
import { Link } from 'react-router'
import { render } from 'react-dom'
import { Router, Route } from 'react-router'
class App extends React.Component {
render() {
return (
<div>
<div className="nav">
<Link to="/home">app</Link>
</div>
<div className="content">
// THIS IS THE CORE LINE YOU ARE MISSING
{this.props.children || "No one is home :("}
</div>
</div>
);
}
}
class Home extends React.Component {
render() {
return (
<div>Honey, I'm home!!!</div>
);
}
}
render(
<Router>
<Route path="/" component={App}>
<Route path="home" component={Home}/>
</Route>
</Router>,
document.getElementById('tempoot')
)