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

无论是使用链接还是

this.props.history.push（）

，地址栏中的URL都在正确更新，并且在DOM树（在本例中为my

App

component）更高的组件中

this.props.location

位置也在正确更新

但是，由于某些原因，它没有更新树下较远的组件中的

this.props.location

，这导致我的路由失败

猜猜会出什么问题

注意：我在这个项目中使用了redux，但我不会更改

this.props.history

使用redux，至少现在是这样。我不认为这会影响任何事情，但如果是，请告诉我

编辑：这里是DOM树的相关部分（我的电子邮件被仔细划掉了），如果有帮助的话。如您所见，

Authenticated

组件有一个过时的

this.props.location

（

/plans

），而

App

是正确的（

/posts

）。两者都用路由器包装。在树的下一层，经过身份验证的组件也有错误的位置

---

您可能正在处理的问题。幸运的是，这并不难解决：

如果您在使用高阶组件（如

connect

（来自react-redux）时遇到此问题，您只需将该组件包装在

withRouter

中即可删除阻止的更新

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

---

在我的例子中，这是js入口点中的一个错误。我的代码是：

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

ReactDOM.render(
//关于故障组件的问题：它们是否连接到redux，或者是从其父级传下来的
这个.props.location
？Andrew组件包装在
withRouter
中，我以前肯定犯过错误，但这不是本例中的问题。不更新的组件包装在
withRouter中e> ，并将this.props.location作为一个道具。事实上，如果我刷新页面，现在URL栏正在更新，正确的
this.props.location
被传递到inIt很难看到，但我添加了一张图片以澄清这可能是相同的问题，只是在树的更高位置（可能在
连接（用户）
）“
路由
组件不会进行任何神奇的全局更改侦听；如果树中较高的任何内容对
shouldComponentUpdate
返回false，则不会进行重新渲染。@AlexGuerra因此基本上您需要使用路由器将所有内容包装到树下需要
道具的最低分支。loc”ation
？因为没有什么神奇的是，你需要将位置更改传播到任何使用
shouldComponentUpdate
的地方，谁的竞争取决于位置。react-redux的
connect
默认实现scu，它不“知道”关于位置更改，除非通过道具告知。
withRouter
是一种方便，因此您不需要手动将
位置
传播到整个树，但这有点欺骗性，因为您仍然需要避免跳过整个树的更新。
ReactDOM.render(
    <BrowserRouter>
        <Route component={App}/>
    </BrowserRouter>,
    document.getElementById("app")
);