首先,我对
withRouter HoC非常熟悉,但是,在这种情况下,它没有帮助,因为我不想访问组件中的历史对象.
我正在尝试实现一种机制,如果我从API端点收回401,则会将用户重定向到登录页面.为了发出http请求,我使用的是axios.我需要覆盖大约60个端点,这些端点在我的应用程序中用于十几个组件.
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找到
原文地址:https://www.jb51.cc/react/300669.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。