一个文件中有多个反应路由器

Question

我有两个组件：Topbar和SideBar。如果单击链接，侧边栏工作正常，内容更改。这是补充工具栏的路由器代码：

render(
    <Router history={browserHistory}>     
        <Route component={Sidebar}>
            <Route path="/" component={Home}/>
            <Route path="/book" component={Book}/>
            <Route path="/car" component={Car}/>
        </Route>
    </Router>,
    document.getElementById('root')
);

现在，我希望在Topbar中有一个链接来更改内容。我刚刚在补充工具栏的路由器后添加了一个路由器：

    <Router history={browserHistory}>     
        <Route component={Topbar}>
            <Route path="/add-book" component={AddBook}/>
        </Route>
    </Router>,
    document.getElementById('topbar')

它不起作用。然后我试过这个：

var Routes = React.createClass({
    render: function() {
        return (
          <Router history={browserHistory}>       
            <Route component={Sidebar}>
            <Route path="/" component={Home}/>
            <Route path="/books" component={Book}/>
            <Route path="/cars" component={Car}/>
          </Router>
    )
  }
});

ReactDOM.render(<Routes />, document.getElementById('root'));


var RoutesTop = React.createClass({
  render: function() {
    return (
      <Router history={browserHistory}>       
        <Route component={Topbar}>
            <Route path="/add-books" component={AddBook}/>
        </Route>
      </Router>
    )
  }
});

ReactDOM.render(<RoutesTop />, document.getElementById('topbar'));

它不起作用。如何在Topbar中创建工作链接？