Using React Router to control independent components - reactjs

Question

I am new to React/Redux and I'm struggling with controlling my app layout with React Router (What I am doing maybe beyond the realms of React Router). I have the following code setup:
INDEX.JS
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<Router history={ browserHistory } routes={ routes } />
</Provider>
, document.querySelector('#root'));
APP.JS
class App extends Component {
render() {
return (
<div>
<TopNavigation />
<SideNavigation />
<Stage />
</div>
);
}
}
SIDENAVIGATION.JS
render() {
const openSideNavDrawer = classNames({
'side-navigation-drawer': true,
'open': this.state.sideNavIsOpen
});
return (
<nav className="side-navigation">
<ul onMouseOver={ this.openSideNavDrawer.bind( this ) } >
<li>
<Link to="/project">1</Link>
</li>
<li>
<Link to="/pages">2</Link>
</li>
<li>
<Link to="/blocks">3</Link>
</li>
<li>
<Link to="/reorder">4</Link>
</li>
<li>
<Link to="/download">5</Link>
</li>
</ul>
<div className={ openSideNavDrawer } onMouseOut={ this.closeSideNavDrawer.bind( this ) } >
{ this.props.children }
</div>
</nav>
);
}
ROUTER.JS
import { Route, IndexRoute } from 'react-router';
export default (
<Route path="/" component={ App }>
<Route component={ SideNavigation }>
<Route path="/project" component={ Project } />
<Route path="/pages" component={ Pages } />
<Route path="/blocks" component={ Blocks } />
<Route path="/reorder" component={ Reorder } />
<Route path="/download" component={ Download } />
</Route>
</Route>
);
WIREFRAME WITH EXPLANATION
So far I have only attempted to wire the side navigation, I am receiving no errors but the routing is not working.
Please can anyone explain if:
a/ This is even possible with React Router?
b/ If it is possible what am I doing wrong?
Many thanks in advance.