connect 和 withRouter 问题答案

【问题标题】：connect and withRouter issueconnect 和 withRouter 问题
【发布时间】：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 道具

【讨论】：

【解决方案4】：

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

const ShowTheLocationWithRouter = withRouter(Login);

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

【讨论】：