Реакция: как сохранить состояние бокового поля между изменениями url с помощью history.push()?

Question

У меня есть фиксированная боковая панель, которая содержит строку поиска с помощью кнопок фильтра, похожей на https://facebook.github.io/react/docs/thinking-in-react.html

элементы списка являются интерактивными и вызвать history.push() для вложенной URL-адресов пути.

вложенная структура путь

/category-1 
/category-1/product-1 
/category-1/product-2 
/category-2 
/category-2/product-1 
/category-2/product-2 
. 
. 
. 
/category-n/product-m 
/category-n/product-k 

Пользователь может прокручивать список в Sidepanel и выберите фильтры. Однако щелчок по элементу списка (с onClick(), за которым следует history.push()) вызывает визуализацию всей страницы (включая боковую панель). Это, в свою очередь, не поддерживает состояние боковой панели, поэтому фильтры и положение прокрутки сбрасываются.

Родитель render: function() выглядит следующим образом:

return(
    <div id="main-view"> 
    <Sidepanel history={this.props.history} properties={this.props.properties} /> 
    React.cloneElement(this.props.children, {this.props}); 
    </div> 
); 

React.cloneElement() является продуктом информация контейнер, который должен оказывать только.

Я использую react-router, react-redux and redux-simple-router.

Нужно ли сохранять положение прокрутки списка боковых панелей и значения фильтра за пределами боковой панели? Или есть лучший способ сохранить состояние боковой панели между URL-адресом?

Answer 1

Ваша архитектура не соответствует тому, что вы хотите сделать.

Просто визуализируйте навигацию в своем исходном компоненте верхнего уровня, и он никогда не потеряет состояние - например, в вашем компоненте Application. Тогда изменение маршрута не повлияет на SidePanel.

Также вы можете передать обратный вызов для установки/изменения навигации от детей, если это необходимо (например, hide() или addMenuItems()).