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

首先,我对 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找到

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

相关文章