使用React Router控制独立组件

Question

我是React / Redux的新手，我正在努力用React Router控制我的应用程序布局（我正在做的事情可能超出了React Router的范围）。我有以下代码设置：

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

到目前为止，我只尝试连接侧面导航，我没有收到任何错误，但路由无效。

请任何人解释是否：

a /甚至可以使用React Router吗？

b /如果有可能我做错了什么？

非常感谢提前。