redux 连接和路由器问题

2uluyalo 于 2022-11-12 发布在其他

关注(0)|答案(5)|浏览(171)

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

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

然而，如果我改变了顺序的withRouter和连接它不工作：

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

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

5条答案

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

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

请参考https://reacttraining.com/react-router/core/api/withRouter，它清楚地表明，它不能以相反的方式工作

你可以用两种方法来做，

正确的方式：

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

有了这个，你就可以在mapStateToProps中得到路由器的属性，比如历史，比赛等等。

第二种方式：

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

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

如果有人仍然有这个问题，那么请遵循这一条

const ShowTheLocationWithRouter = withRouter(Login);

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

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

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