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

Posted 2023-02-21

【中文标题】如何在 HOC reactjs 中使用 history.push？

【英文标题】：How to use history.push in HOC reactjs?

【发布时间】：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()，查看***.com/questions/53539314/…

【参考方案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";