如何在 React 组件之外访问历史对象 [英] How to Access History Object Outside of a React Component

问题描述

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

我正在尝试实现一种机制，如果我从 API 端点收到 401，则将用户重定向到登录页面.为了发出 http 请求，我使用 axios.我需要涵盖大约 60 个端点，它们在我的应用程序中的十几个组件中使用.

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

<代码>1.提出请求2.如果失败&&error_code = 401，更新用户路由到`/login`3.如果成功，返回承诺

我在上面遇到的问题是更新用户的路线.以前，在 react-router-v3 中，我可以直接从 react-router 包中导入 browserHistory 对象，现在已经不可能了.

那么，我的问题是，如何在不通过调用堆栈传递的情况下访问 React 组件之外的历史对象?

解决方案

react-router v4 还提供了一种通过 history 包共享历史的方法，即 createBrowserHistory() 功能.

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

在你的项目中创建一个名为 history.js 的文件，内容如下:

import { createBrowserHistory } from 'history';const 历史 = createBrowserHistory();导出默认历史记录；

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

从./history.js"导入历史；

请注意，只有 Router 接受 history 属性(BrowserRouter 不接受)，因此请务必相应地更新您的路由器 JSX:

import { Router } from "react-router-dom";从./history.js"导入历史；//然后在你的 JSX 中:返回 (<路由器历史={历史}>{/* 照常路由 */}</路由器>)

可以在 https://codesandbox.io/s/owQ8Wrk3 中找到工作示例>

First of all, I am pretty familiar with the withRouter HoC, however, in this case, it doesn't help because I do not want to access the history object in a component.

I am trying to achieve a mechanism that will redirect the user to the login page if I receive back a 401 from a API endpoint. For making http requests I am using axios. I have around 60 endpoints that I need to cover, that are used in a dozen of components throughout my app.

I want to create a decorator function to the axios instance object, that:

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

The problem I have with the above is to update the route of the user. Previously, in react-router-v3, I could have imported the browserHistory object directly from the react-router package, which is no longer possible.

So, my question is, how can I access the history object outside of the React Component without passing it trough the call stack?

解决方案

react-router v4 also provides a way to share history via the history package, namely createBrowserHistory() function.

The important part is to make sure that the same history object is shared across your app. To do that you can take advantage of the fact that node modules are singletons.

Create a file called history.js in your project, with the following content:

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();
export default history;

You can then just import it in your application via:

import history from "./history.js";

Please note that only Router accepts the history prop (BrowserRouter does not), so be sure to update your router JSX accordingly:

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

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

A working example can be found at https://codesandbox.io/s/owQ8Wrk3

这篇关于如何在 React 组件之外访问历史对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！