连接和路由器问题

IT技术 javascript reactjs redux react-redux frontend
2021-04-18 00:05:41

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

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

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

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

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

4个回答

您可以将它与composeredux 库中的方法一起使用

export default compose(
  withRouter,
  connect(mapStateToProps, mapDispatchToProps)
)(App);
在这种情况下,mapStateToProps、mapDispatchToProps 的值是多少?在App层面,我们应该如何定义这两个?这两个不是特定于每个组件的(从该组件感兴趣的 redux 中获取这些道具)?
2021-05-29 00:05:41
我这样做了,但现在我得到了 JSX element type 'App' does not have any construct or call signatures. TS2604
2021-06-04 00:05:41
import {compose} from "redux"; //Code export default compose( withRouter, connect(mapStateToProps, mapDispatchToProps) )(App);
2021-06-15 00:05:41

你能参考这个https://reacttraining.com/react-router/core/api/withRouter,它清楚地表明它不能反过来工作

也许它在某个时候确实提到过它,但它可能从那时起就发生了变化!
2021-06-07 00:05:41
哦,嗨,我以为文档中提到了它,但现在看它似乎没有,也许我弄错了
2021-06-09 00:05:41
它在哪里说的?您能否引用答案中的相关部分?
2021-06-16 00:05:41

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

正确的方式:

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

有了这个,您将能够在 mapStateToProps 中获得 withRouter props,如历史记录、匹配等。

方式二:

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

使用这个,你将无法获得 withRouter props

这是完美的工作。在我的 react app v17 .... react-router-dom 5 和 redux 最新。
2021-06-07 00:05:41

如果有人仍然有问题,那么请按照这个

const ShowTheLocationWithRouter = withRouter(Login);

export default connect(mapStateToProps, mapDispatchToProps)(ShowTheLocationWithRouter);
这是行不通的,因为我收到了一个错误,该错误引发了登录页面(或您将包装的组件)中的 SetState 函数将处于错误状态,
2021-06-03 00:05:41