连接和withRouter问题

Question

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

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

然而，如果我更改了withRouter和connect的顺序，它就无法工作：

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

我已经在App.js中使用console.log打印了props。它已经收到了location和history props。我正在研究为什么顺序很重要的理论？

- xxddoo

Answer 1

你可以使用redux库中的compose方法来使用它。

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

- Wesley Amaro

---

在这种情况下，mapStateToProps和mapDispatchToProps的值会是什么？在应用程序级别，我们应该如何定义这两个函数？难道这两个函数不是针对每个组件具体定义的（为了从redux获取此组件感兴趣的那些props）吗？ - theprogrammer

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

我已经这样做了，但现在我得到了 JSX 元素类型 'App' 没有任何构造或调用签名。TS2604 的错误提示。 - Ali Husham

Answer 2

您能参考这个https://reacttraining.com/react-router/core/api/withRouter，它明确指出它不能反过来使用。

- Aashish Karki

---

它在哪里说的？您能在您的回答中引用相关部分吗？ - Emile Bergeron

嗨，我以为文档本身就提到了这一点，但现在看起来好像没有，也许我弄错了。 - Aashish Karki

也许它在某个时候提到了，但是它可能已经改变了！ - Emile Bergeron

Answer 3

你可以用两种方式完成，

正确的方式：

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

使用此方法，您将能够在mapStateToProps中获取withRouter属性，例如history、match等。

第二种方式：

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

使用此方法，您将无法获取 withRouter 属性

- the_haystacker

---

这个完美地运作着。在我的React应用程序v17中...使用的是react-router-dom 5和最新版本的redux。 - DirtyMind

Answer 4

如果您仍然遇到此问题，请按照以下步骤进行操作。

const ShowTheLocationWithRouter = withRouter(Login);

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

- Nabnit Jha

---

这不会起作用，因为我得到了一个错误，React引发了一个问题，即Login页面（或您将包装的组件）中的SetState函数将具有不良状态。 - Rohan Devaki

Answer 5

export default connect(mapStateToProps)(withRouter(FacilitiesDropdown))

这解决了我同时使用connect和withRouter的问题

- Sharikh Ahmed