Javascript 嵌套在'；智能&x27；Redux容器组件

我正在尝试使用React、React router和Redux创建一个电子应用程序。我发现，当我将交换机/路由逻辑嵌套在纯粹的表示组件（

页面

）下时，我的路由逻辑工作得非常好，但如果嵌套在“智能”容器组件下，我必须刷新页面以查看导航更改

在我的React组件层次结构的顶部（就在

HashRouter

的正下方），我有一个

页面

：

export default function Page (props) {
  return (
      <div className={`${styles.page}`}>
        <SideBar/>
        <DetailPane>{props.children}</DetailPane>
      </div>
  );
}

export default function Page (props) {
  return (
      <div className={`${styles.page}`}>
        <SideBar/>
        {props.children}
      </div>
  );
}

这意味着，

..

嵌套在

下面

如果我尝试在我的应用程序中导航（单击侧栏中的链接），在我强制重新加载Electron应用程序之前，我实际上不会看到细节窗格渲染新组件

但是，如果我从

页面

中省略

详细窗格

，我发现路由工作与预期一样：

export default function Page (props) {
  return (
      <div className={`${styles.page}`}>
        <SideBar/>
        <DetailPane>{props.children}</DetailPane>
      </div>
  );
}

export default function Page (props) {
  return (
      <div className={`${styles.page}`}>
        <SideBar/>
        {props.children}
      </div>
  );
}

然而，我仍然很好奇为什么这对容器组件版本不起作用。作为参考，这是

DetailPane

的容器组件版本：

import {connect} from 'react-redux';
import {DetailPane} from '../../components';

// TODO: delete this container?

function mapStateToProps (state): {} {
  return {};
}

function mapDispatchToProps (dispatch) {
  // TODO.
  return {};
}

export default connect(mapStateToProps, mapDispatchToProps)(DetailPane);

---

connect

HOC实现逻辑，因此如果道具没有更改，组件也不会更新

为了防止这种情况发生，并使组件始终呈现，您可以覆盖

connect

调用中的

pure

选项

export default connect(mapStateToProps, mapDispatchToProps, undefined, { pure: false })(DetailPane);

---

有关更多详细信息，请参阅。

谢谢，这很有效。我现在仍坚持使用演示版，但这一点非常有用，以防以后需要切换回去。