如何使用反应路由器以编程方式导航[重复]答案

【问题标题】：How to programmatically navigate using react router [duplicate]如何使用反应路由器以编程方式导航[重复]
【发布时间】：2020-01-05 00:42:30
【问题描述】：

当使用 react-router 时，我可以使用 Link 元素创建由 react-router 本地处理的链接。

我在内部看到它调用 this.context.transitionTo(...)。

我想进行导航，但不是来自链接，例如来自下拉选择。我怎样才能在代码中做到这一点？ this.context 是什么？

我看到了 Navigation mixin，但是我可以不使用 mixin 吗？

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

您想安装历史包npm install history，然后将它的一个实例传递给您的路由器：

import { Router } from "react-router";
import { createBrowserHistory } from "history";

const history = createBrowserHistory()

<Router history={history}>
  <App/>
</Router>

然后，您可以使用withRouter 以编程方式在应用中的任何位置导航，以获取您的历史实例并执行类似history.push("/my-path") 的操作。

您还可以设置一个文件来创建/导出您可以导入的历史实例。

从技术上讲，您不需要 history 包，因为 react-router 会通过它自己的包，但如果您这样做，您会更喜欢您自己的历史实例提供的灵活性。

【讨论】：

你也可以在一个单独的模块中创建一个历史对象，有点像'history.util.js'，然后从那里导入它，以便在组件之外访问它。

【解决方案2】：

您是否尝试过使用路由器的重定向组件？

这是一个例子：

<Redirect to="/login" exact component={Login} />

【讨论】：