仅在某些组件中更新了React路由器位置

Question

是否使用链接或this.props.history.push()地址栏中的URL正确更新,以及this.props.location在DOM树中较高的组件(在本例中为我的App组件).

但是,由于某种原因,它不会更新this.props.location我的组件,这些组件位于树的下方,这导致我的路由失败.

什么可能出错？

注意:我在这个项目中使用redux,但我没有改变this.props.history使用redux,至少目前是这样.我不认为这会影响任何事情,但如果是,请告诉我

编辑:如果它有用,这是DOM树的相关部分(我的电子邮件被仔细划掉).如您所见,Authenticated组件具有过时this.props.location(/plans),而App正确(/posts).两者都包含在路由器中.树下面的组件Authenticated也比错误的位置.

Answer 1

您可能正在处理阻止的更新.幸运的是,解决起来并不难:

如果您在使用更高阶组件connect(来自react-redux)时遇到此问题,则可以将该组件包装在一个中withRouter以删除阻止的更新.

// before
const MyConnectedComponent = connect(mapStateToProps)(MyComponent)
// after
const MyConnectedComponent = withRouter(connect(mapStateToProps)(MyComponent))