Несколько вызовов ReactDOM.render с общим контекстом маршрутизатора

Question

У меня есть два компонента React, сделанные таким образом.

ReactDOM.render(
    <Router history={ browserHistory }> 
    <Route path='/items' component={ App }> 
     <IndexRoute component={ Home } /> 
     <Route path='/items/:id' component={ Details } /> 
    </Route> 
    </Router>, 
    document.getElementById('app') 
); 

И второе, что является боковой панелью.

ReactDOM.render(
    <Sidebar />, 
    document.getElementById('sidebar') 
); 

Я хотел бы использовать Link помощник от среагировать-маршрутизатора в боковой панели компонента. Однако я получаю следующую ошибку: «Неоткрытое инвариантное нарушение: ссылки, отображаемые вне контекста маршрутизатора, не могут перемещаться». Это имеет смысл, потому что боковая панель не находится в контексте маршрутизатора, как показано выше.

Есть ли способ разделить контекст маршрутизатора с боковой панелью?

Я хотел бы изменить компоновку боковой панели на основе маршрута (и получить доступ к объекту роутера в этом .props должным образом) и использовать Ссылка, как и должно быть.

Я не хочу работать с хакерскими подходами, такими как history.pushState или parsing location.path, чтобы изменить макет боковой панели в соответствии с соответствующим маршрутом элементов.

Answer 1

Вы должны иметь возможность просто визуализировать свою боковую панель самостоятельно <Router>. Важно то, что они имеют один и тот же экземпляр history (в данном случае browserHistory).

При установке <Router> он добавляет слушателя к своему экземпляру history. Когда экземпляр history получает новое местоположение, он уведомляет всех своих слушателей.

ReactDOM.render((
    <Router history={browserHistory}> 
    <Route component={Sidebar} /> 
    </Router> 
) document.getElementById('sidebar')