如何在HOC reactjs中使用history.push？

Question

我正在使用axios拦截器。它将捕获所有请求。我的想法是通常在同一位置分发错误。所以我创建了这个拦截。如果出现404错误，则表示我将调度操作并将页面重定向到首页。但是很遗憾，我无法访问HOC中的props.history。

我在这里分享我已经实现的代码：

HOC axios拦截：

import React, {useEffect} from "react";
import axios from "axios";

const checkRequests= Wrapped => {
    function CheckRequests(props) {
        useEffect(()=>{
            axios.interceptors.response.use(function (response) {
                // Do something with response data
                return response;
            }, function (error) {
                switch (error.response.status) {
                    case 404 :
                        props.history.push('/login') // will redirect user to login page 
                        break
                    default :
                        break
                }
                // Do something with response error
                return Promise.reject(error);
            });
        })

        return (
            <Wrapped {...props} />
        )
    }
    return CheckRequests
}

export default checkRequests

并将此组件包装在App.js中：

import React from "react"
import CheckRequests from "./HOC/CheckRequests"

function App(props){ ... }

export default checkRequests(App)

错误：

当控制台是HOC中的道具时，它为空

console.log(props) => {}

请帮助我。还有什么其他方法可以从该HOC访问history.push。要分发动作，请使用store.dispatch(logout())。

Answer 1

在这样的导出语句中包装withRouter HOC：

export default withRouter(checkRequests);

不要忘记在文件顶部导入

import { withRouter } from "react-router";

Answer 2

您可以使用withRouter

import { withRouter } from 'react-router-dom';

export default withRouter(checkRequests);

Answer 3

感谢您的回答。我将您的建议添加到了我的代码中。但是我得到了这个错误You should not use Route or withRouter() outside a Router。然后我发现它在路由器外部，所以我添加了此

import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
   <BrowserRouter>
     <App />
   </BrowserRouter>

  , document.getElementById('root'));

在index.js上。效果很好。