如何在 React 组件之外访问历史对象

首先，我对这个领域非常熟悉带路由器 https://reacttraining.com/react-router/web/api/withRouter然而，在这种情况下，HoC 没有帮助，因为我不想访问history组件中的对象。

我正在尝试实现一种机制，如果我从 API 端点收到 401，该机制会将用户重定向到登录页面。为了发出 http 请求，我正在使用axios https://github.com/mzabriskie/axios。我需要覆盖大约 60 个端点，这些端点在我的应用程序的十几个组件中使用。

我想为 axios 实例对象创建一个装饰器函数，即：

1. makes the request
2. if fail && error_code = 401, update user route to `/login`
3. if success, return promise

我遇到的问题是更新用户的路线。此前，在react-router-v3，我本可以导入browserHistory直接从react-router包中获取对象，这不再可能了。

所以，我的问题是，如何访问 React 组件外部的历史对象而不通过调用堆栈传递它？

React-router v4 还提供了一种通过以下方式共享历史记录的方法history包，即createBrowserHistory()功能。

重要的部分是确保在您的应用程序中共享相同的历史对象。为此，您可以利用节点模块是单例的这一事实。

创建一个名为history.js在您的项目中，包含以下内容：

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();
export default history;

然后您可以通过以下方式将其导入您的应用程序：

import history from "./history.js";

请注意，仅Router接受history prop (BrowserRouter没有），因此请务必相应地更新您的路由器 JSX：

import { Router } from "react-router-dom";
import history from "./history.js";

// and then in your JSX:
return (
  <Router history={history}>
    {/* routes as usuall */}
  </Router>
)

可以在以下位置找到一个工作示例https://codesandbox.io/s/owQ8Wrk3 https://codesandbox.io/s/owQ8Wrk3