react-router – 如何访问React组件之外的历史对象

发布时间：2020-12-15 20:41:07 所属栏目：百科来源：网络整理

导读：首先,我对 withRouter HoC非常熟悉,但是,在这种情况下,它没有帮助,因为我不想访问组件中的历史对象. 我正在尝试实现一种机制,如果我从API端点收回401,则会将用户重定向到登录页面.为了发出http请求,我使用的是axios.我需要覆盖大约60个端点,这些端点在我的应

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

我正在尝试实现一种机制,如果我从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中,我可以直接从react-router包导入browserHistory对象,这是不可能的.

所以,我的问题是,如何在不通过调用堆栈的情况下访问React组件之外的历史对象？

react-router v4还提供了一种通过历史包共享历史记录的方法,即createBrowserHistory()函数.

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

在项目中创建名为history.js的文件,其中包含以下内容：

import createBrowserHistory from 'history/createBrowserHistory';

const history = createBrowserHistory();
export default history;

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

import history from "./history.js";

请注意,只有路由器接受历史支柱(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找到

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!