在React中，如何正确地以编程方式导航到新的路线/页面？

Question

我一直试图找到一个直接的答案，即使在搜索StackOverflow之后，我也找不到当前版本的React的正确答案。

在我的情况下，我遇到以下情况-用户设置数据，将其发布到服务器上，并使用我的Save()方法，如果保存操作成功，我想将其重定向到根主页。

我找到的许多文档都提到使用this.props.history.push(...)来推新路线。但是，随着React 4.0.0+的改变，现在history在props页面上是未定义的。

如果这是不推荐使用的路由到另一页面的方式，则我不一定会对将新路由推送到历史对象感兴趣。但是，我发现的所有最新示例都涉及在JSX中设置路由和链接。很好，但是我还没有找到一种在某些代码条件下以编程方式重定向页面的方法。

很抱歉，如果已经有答案，但是我还没有找到直接的答案。

Answer 1

route props仅提供给component组件的render或Route道具所使用的组件。

如果要在应用程序的任何其他组件中使用路线道具，则需要手动传递道具或使用withRouter HOC。

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

// ...

export default withRouter(MyComponent);

Answer 2

您必须将此组件与路由器连接。要进行连接，您必须使用Router。

export default withStyles(commonModalStyle)(withRouter(connect(mapStateToProps, mapDispatchToProps)(NewOrUpdateModal)));

请参阅此