如何使用React Router以编程方式导航

Question

在使用react-router时，我可以使用Link元素创建由React Router本机处理的链接。

我在内部看到它称为this.context.transitionTo（...）。

例如，我想从下拉列表中进行导航，而不是从链接进行导航。如何在代码中执行此操作？这是什么上下文？

我看到了导航混合器，但是我可以在没有混合器的情况下做到这一点吗？

Answer 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")的操作，从而以编程方式导航到应用程序中的任何地方。

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

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

Answer 2

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

这是示例：

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