React：如何在url更改与history.push（）之间保持sidepanel状态？

Question

我有一个固定的侧面板，其中包含一个带有过滤器按钮的搜索栏，类似于https://facebook.github.io/react/docs/thinking-in-react.html 列表项是可单击的，并触发嵌套路径URL的history.push（）。 嵌套的路径结构是 / 1类 /类别-1 /产物-1 /类别-1 /产物-2 /类别-2- /类别-2 /产物-1 /类别-2 /产品-2-  。  。  。 /类别-N /产物-m的 /类别-N /产物-K 用户可以滚动侧面板列表并选择过滤器。但是，单击列表项（使用onClick（）后跟history.push（））会导致整个页面（包括侧面板）呈现。这反过来不保持侧面板的状态，因此过滤器和滚动位置被重置。 父渲染：function（）看起来像： 返回（   ＆lt; div id =“main-view”＆gt;     ＆lt; Sidepanel history = {this.props.history} properties = {this.props.properties} /＆gt;     React.cloneElement（this.props.children，{this.props}）;   ＆LT; / DIV＆GT; ）; React.cloneElement（）是应该只呈现的产品信息容器。 我正在使用react-router，react-redux和redux-simple-router。 我是否需要存储侧面板列表滚动位置并在侧面板外部过滤值？或者是否有更好的方法来保持侧面板在网址更改之间的状态？

Answer 1

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

只需在顶级父组件中渲染导航，它就永远不会失去状态 - 例如在Application组件中。然后SidePanel不会受到路线变化的影响。

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