How to implement multiple routers in a React app?

Question

React

The page has a sidebar with content to the right of it. When switching links in the sidebar, the content changes, everything is ok with that.
All this is in the #root block. Here is the router code:

...
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')
...
);

But at the top there is a #topbar block with a link and it is necessary that when you click on it, the content changes in the same place to the right of the sidebar. I did this, I just added another one above the sidebar router:

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

I imported the component, in the topbar component I wrote:

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

Doesn't work, what's the best way to do this?

Answer 1

I would make the sidebar and topbar already inside the page component, and not part of the router.