Использование информации о маршрутизации вне компонента React

Question

Я использую функцию извлечения, которая извлекается снаружи, чтобы ее можно было использовать во всем приложении. Я вызываю эту функцию-обертку всякий раз, когда хочу сделать какие-либо запросы API. Но проблема здесь в том, что мне нужно обрабатывать случай, когда сервер возвращает 401 100 или любой код состояния, который я в основном хочу перенаправить на страницу входа. Но у меня не было бы здесь информации о маршрутизации. Есть идеи, как это можно решить?

эта функция выглядит примерно так:

export module FetchWrapper {
  export async function fetchCall(url, type, headers) {
    let url = obj.url;
    let options = {};
    options.method = type;
    options.headers = { ...options.headers, ...headers };
    const response = await fetch(url, options);
    return await response.json();
  }
}

Любой компонент будет использовать так:

  async componentDidMount() {
    try {
      let response = await FetchWrapper.fetchCall({
        url: `/api/fetch/details`,
        type: "GET",
        headers: { contentType: "application/json" } 
      });
     //on success
    } catch (error) {
      // error handling
    }
  }

Определение маршрутизации внутри App.tsx

<Switch>
     <Route exact={true} path="/" component={Start} />
     <Route path="/signin" component={SignIn} />
     <Route path="/signout" component={SignOut} />
     <Route path="/page1" component={Page1} />
     <Route path="/page2" component={Page2} />
</Switch>

Answer 1

export module FetchWrapper {
    export async function fetchCall(history, {url, type, headers}) {
        let url = obj.url;
        let options: any = {};
        options.method = type;
        options.headers = { ...options.headers, ...headers };

        const response = await fetch(url, options);
        if (response.status === 401 || response.status === 100) {
            history.replace("/login");
            // you can throw error and catch when execute or what you want
        } else {
            return await response.json();
        }
    }
}




async componentDidMount() {
    try {
      let response = await FetchWrapper.fetchCall(history,{
        url: `/api/fetch/details`,
        type: "GET",
        headers: { contentType: "application/json" } 
      });
     //on success
    } catch (error) {
      // error handling
    }
  }

снова проверьте обе функции

Я надеюсь, что это работает

Answer 2

Использование «history» из «act-router-dom »в значительной степени решило эту проблему.

Внутри индексного файла

    import { Router } from "react-router-dom";
    import { createBrowserHistory } from "history";
    export const history = createBrowserHistory();
    ReactDOM.render(
      <Router history={history}>
          <App />
      </Router>,
      document.getElementById("root")
    );

И в файле оболочки, используя его, как этот

import { history } from "../../index";
export module FetchWrapper {
    export async function fetchCall(url, type, headers) {
        let url = obj.url;
        let options: any = {};
        options.method = type;
        options.headers = { ...options.headers, ...headers };
        const response = await fetch(url, options);
        if (response.status === 401 || response.status === 100) {
            history.replace("/login");
        } else {
            return await response.json();
        }
    }
}