Question

在403 API响应之后，我正在尝试将用户重定向到“未授权”页面。这是到目前为止我得到的：

创建了自己的历史，以便在React组件之外使用history.push

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页面，我在其中调用redux操作retrieveArticle(id)。如果用户无权查看文章，则浏览器的路由会正确更改为/not-authorized，但“文章”组件将保持呈现状态（页面不变）。当我将.then(() => this.props.history.push("/not-authorized"))添加到redux操作调用时，它开始起作用，但是我不想将其添加到应用程序中的每个api调用中...我想为我的所有api调用全局解决它api处理程序。

Answer 1

更改

export default class OwnBrowserRouter extends BrowserRouter {
  history
}

收件人

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

如Class fields proposal中所述，某些编译器可能会完全忽略该字段。因此，将使用原始历史记录（在原始BrowserRouter中创建的历史记录）。

公共字段和私有字段声明都在例如，是否存在初始化程序。如果没有初始化程序，该字段设置为undefined。这与某些编译器实现，而这些实现只会完全忽略没有初始化程序的字段声明。

React Router-从外部组件导航时页面不会更改

1 个答案: