Question

如何从history访问mapDispatchToProps道具

import { withRouter } from "react-router-native";

const mapDispatchToProps = (dispatch, ownProps) => ({
   doSomething: () => ownProps.history.goBack() // history is undefined ...?? 
})

export default withRouter(connect(undefined, mapDispatchToProps)(MyComponent))

更清楚地知道如何从react-router connect方法中访问mapDispatchToProps 上下文道具，docs说：

如果您的mapDispatchToProps函数声明为带有两个参数，则将使用dispatch作为第一个参数，将props传递给连接的组件作为第二个参数，

更新：

这是react-router的{{3}}对此的看法

在大多数情况下，您可以使用链接，导航链接和重定向来执行导航操作。有时，在某些最初由操作启动的异步任务之后，您可能还需要以编程方式导航。例如，您可以在用户提交登录表单时调度操作。然后，您的重击，传奇或其他异步处理程序会对凭据进行身份验证，如果成功，则需要以某种方式导航到新页面。这里的解决方案只是将历史对象（提供给所有路由组件）包括在操作的有效负载中，并且异步处理程序可以在适当的时候使用它来导航。

很明显，在连接的组件内部不支持外部上下文，因此需要找到适当的解决方法。

Answer 1

下面是实现此目的的另一种方法，但请先使用console.log检查道具中是否存在历史记录。

const mapDispatchToProps = (dispatch, ownProps) => ({
 doSomething: (history) => history.goBack() // history is undefined ...?? 
})

这样的事情你可以做...

Answer 2

对于将遇到此问题的任何人，您可以访问react-router中ownProps的{{1}}上下文道具，但请确保您的 < em>已连接的组件 位于以下任一位置：

作为组件道具以mapDispatchToProps的身份传递给Router
如果这不是直接路线，但嵌套得很深并且需要<Route component = { MyConnectedComponent }/>道具，请用react-router包裹

mapDispatchToProps中的react-router访问历史道具

2 个答案: