React router - страница не меняется при навигации извне

Question

Я пытаюсь перенаправить пользователя на страницу "Не авторизован" после получения 403 ответа API. Вот что я получил до сих пор:

создал собственную историю использования history.push вне компонентов React

import { BrowserRouter } from "react-router-dom"
import { createBrowserHistory } from "history"

export const history = createBrowserHistory()

export default class OwnBrowserRouter extends BrowserRouter {
  history
}

Тогда я получил обработчик API, как это:

import { history } from "./my-own-history"

const responseErrorHandler = error => {
  const status = _get(error, "response.status")
  if (status === 403) {
    history.push(getRoutePath("not-authorized"))
  }

  throw error
}

const requestFactory = (
  method,
  url,
  body = {},
  useToken = true,
  ownToken = ""
) => {
  ... not important code here ...

  return axios(url, config)
    .then(responseSuccessHandler)
    .catch(responseErrorHandler)
}

И, наконец, у меня есть страница Article, где я вызываю избыточное действие retrieveArticle(id). Если пользователь не авторизован для просмотра статьи, маршрут браузера корректно изменяется на /not-authorized, но компонент Article остается обработанным (страница не изменяется). Когда я добавил .then(() => this.props.history.push("/not-authorized")) к вызову излишнего действия, он начал работать, но я не хочу добавлять это к каждому вызову API в моем приложении ... Я хочу решить его глобально для всех вызовов API в моем обработчике API. .

Answer 1

Изменение

export default class OwnBrowserRouter extends BrowserRouter {
  history
}

Для

export default class OwnBrowserRouter extends BrowserRouter {
  history = history;
}

Как указано в предложении Поля класса , некоторые перевозчики могут полностью игнорировать поле. Таким образом, будет использоваться исходная история (созданная в оригинальном BrowserRouter).

Как публичные, так и приватные объявления полей создают поле в экземпляр, присутствует ли инициализатор или нет. Если нет инициализатор, поле установлено как неопределенное. Это немного отличается от определенные реализации транспилятора, которые просто полностью игнорируют объявление поля, которое не имеет инициализатора.