Как реализовать несколько роутеров в приложении React?

Question

[rinatoptimus]

На странице есть sidebar, справа от него контент. При переключении ссылок в сайдбаре контент меняется, с этим все ок.
Все это находится в блоке #root. Вот код роутера:

...
render(
    <Router history={browserHistory}>        
        <Route component={Sidebar}>
            <Route path="/" component={Home}/>
            <Route path="/books" component={Books}/>
            <Route path="/about" component={About}/>
        </Route>
    </Router>,
    document.getElementById('root')
...
);

Но сверху есть блок #topbar со ссылкой и надо, чтобы при нажатии на нее происходила смена контента там же справа от сайдбара. Я сделал так, просто над роутером сайдбара добавил еще один:

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

Импортировал компонент, в самом компоненте топбара написал:

...
    <li><Link to="/add-book" activeClassName="active">Add Book</Link></li>
...

Не работает, как лучше реализовать такое?

Answer 1

[n7olkachev]

Я бы делал сайдбар и топбар уже внутри компонента-страницы, а не частью роутера.