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

Question

无论是使用链接还是this.props.history.push()，地址栏中的网址都会正确更新，以及位于DOM树上方的组件中的this.props.location（在这种情况下，我的App } 零件）。

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

有什么可能出错的猜测？

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

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

Answer 1

您可能正在处理blocked updates。幸运的是，它并不难解决：

  

如果在使用像connect这样的高阶组件（来自react-redux）时遇到此问题，则可以将该组件包装在withRouter中以删除阻止的更新。< / p>

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

Answer 2

就我而言，这是js入口点的错误。我的代码是：

ReactDOM.render(
    <BrowserRouter>
        <App/>                       // <- missing Route!
    </BrowserRouter>,
    document.getElementById("app")
);

我通过添加<Route/>来解决它：

ReactDOM.render(
    <BrowserRouter>
        <Route component={App}/>
    </BrowserRouter>,
    document.getElementById("app")
);