React：如何在 url 变化与 history.push() 之间保持侧面板状态？

Question

我有一个固定的侧面板，其中包含一个带有类似于 https://facebook.github.io/react/docs/thinking-in-react.html

的筛选按钮的搜索栏

列表项可点击并触发 history.push() 嵌套路径 urls。

嵌套路径结构为

/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

用户可以滚动侧面板的列表和 select 过滤器。但是，单击列表项（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

您的架构与您想要做的不一致。

只需在您的 top-level 父组件中呈现导航，它就永远不会丢失状态 - 例如在您的 Application 组件中。那么SidePanel就不会受到路由变化的影响。

如果需要，您还可以传递回调以设置/更改子项的导航（例如 hide() 或 addMenuItems()）。

React：如何在 url 变化与 history.push() 之间保持侧面板状态？

React: how to keep sidepanel state between url changes with history.push()?

browser-history

reactjs

react-router

react-redux