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

【问题标题】：How to use history.push in HOC reactjs?如何在 HOC reactjs 中使用 history.push？
【发布时间】：2020-06-21 08:34:02
【问题描述】：

我有一个 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 中的 props 是空的

console.log(props) => {}

请帮帮我。有没有其他方法可以从该 HOC 访问 history.push。对于调度一个动作，一个动作使用store.dispatch(logout())。

【问题讨论】：

可以使用withRouter()，查看stackoverflow.com/questions/53539314/…

标签： reactjs react-redux react-router react-hooks

【解决方案1】：

感谢您的回答。我将您的建议添加到我的代码中。但我收到了这个错误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 上。它工作正常。

【讨论】：

【解决方案2】：

您可以使用withRouter

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

export default withRouter(checkRequests);

【讨论】：

【解决方案3】：

将 withRouter HOC 包装在 export 语句中，如下所示：

export default withRouter(checkRequests);

不要忘记在文件顶部导入

import { withRouter } from "react-router";

【讨论】：