react-router - 如何在 React 组件之外访问 History 对象

Question

首先，我对 withRouter 非常熟悉。 HoC，然而，在这种情况下，它没有帮助，因为我不想访问 history组件中的对象。

我正在尝试实现一种机制，如果我从 API 端点收到 401，将用户重定向到登录页面。为了发出 http 请求，我使用 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 组件之外的历史对象？

Answer 1

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 找到。