connect 和 withRouter 问题

Posted 2023-02-22

【中文标题】connect 和 withRouter 问题

【英文标题】：connect and withRouter issue

【发布时间】：2019-06-12 07:28:46

【问题描述】：

我在我的项目中使用 Redux 和 React。我在 App.js 中有一些路由。我还在我的项目中使用 react-redux 中的连接功能。为了防止更新阻塞问题，我通常以这种方式包装我的组件

withRouter(connect(mapStateToProps, mapDispatchToProps)(App)),

但是，如果我更改了 withRouter 的顺序并连接它不起作用：

connect(mapStateToProps, mapDispatchToProps)(withRouter(App))

我有 console.log App.js 中的道具。它已经接收到位置和历史道具。我正在弄清楚为什么顺序很重要背后的理论？

【参考方案1】：

您可以将它与 redux 库中的 compose 方法一起使用。

export default compose(
  withRouter,
  connect(mapStateToProps, mapDispatchToProps)
)(App);

【讨论】：

在这种情况下，mapStateToProps、mapDispatchToProps 的值是多少？在 App 层面，我们应该如何定义这两个？这两个不是特定于每个组件（从 redux 中获取该组件感兴趣的那些 props）吗？

import compose from "redux"; //Code export default compose( withRouter, connect(mapStateToProps, mapDispatchToProps) )(App);

我做到了，但现在我得到了JSX element type 'App' does not have any construct or call signatures. TS2604

【参考方案2】：

你能不能参考一下这个https://reacttraining.com/react-router/core/api/withRouter，上面明明说反过来不行

【讨论】：

它在哪里说的？您能否在答案中引用相关部分？

哦，嗨，我以为文档本身中提到了它，但现在看似乎没有，也许我弄错了

也许它确实在某个时候提到过它，但它可能从那以后改变了！

【参考方案3】：

你可以通过两种方式做到这一点，

正确方法：

withRouter(connect(mapStateToProps, mapDispatchToAction)(App));

这样，您将能够在 mapStateToProps 中获取 withRouter 道具，例如历史记录、匹配等。

第二种方式：

connect(mapStateToProps, mapDispatchToAction)(withRouter(App));

使用这个，你将无法获得 withRouter 道具

【讨论】：

这是完美的工作。在我的反应应用程序 v17.... react-router-dom 5 和 redux 最新。

【参考方案4】：

如果有人仍然有问题，请关注这个

const ShowTheLocationWithRouter = withRouter(Login);

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

【讨论】：

这不起作用，因为我遇到了一个错误，该错误引发了登录页面（或您将包装的组件）中的 SetState 函数将处于错误状态，