На странице есть 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>
...
Не работает, как лучше реализовать такое?
