Как использовать history.pu sh в HO C reactjs?

Question

У меня топор ios перехват. Он будет ловить каждый запрос. Моя идея состоит в том, чтобы отправлять ошибки обычно в одном месте. Итак, я создал этот перехват. Если произошла ошибка 404, значит, я отправлю действие и перенаправлю страницу на дом. Но, к сожалению, я не могу получить доступ к props.history в HO C.

Здесь я делюсь кодом того, что я реализовал:

HO C ax ios Перехват:

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

И обертывание этого компонента в приложении. js:

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

function App(props){ ... }

export default checkRequests(App)

Ошибка:

Когда консоль опора в HO C она пуста

console.log(props) => {}

Пожалуйста, помогите мне с этим. Есть ли другой способ доступа к history.pu sh с этого HO C. Для отправки действия используется действие store.dispatch(logout()).

Answer 1

Вы можете использовать withRouter

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

export default withRouter(checkRequests);

Answer 2

Спасибо за ваш ответ. Я добавил ваше предложение в мой код. Но я получил эту ошибку You should not use Route or withRouter() outside a Router. Затем я обнаружил, что это за пределами маршрутизатора, поэтому я добавил это

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

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

  , document.getElementById('root'));

в индекс. js. Работает нормально.

Answer 3

Оберните withRouter HO C в операторе экспорта следующим образом:

export default withRouter(checkRequests);

Не забудьте импортировать в начало файла

import { withRouter } from "react-router";