Javascript 从服务层路由React组件

我不想从HTTP服务层使用window.location.href。如何使用React router来维护历史记录？

您可以在单独的文件中创建

历史记录

对象，并从该文件导出此对象

HandleServerError(error: any) {
        if (error.response.status == 500) {
            window.location.href = '/Internal-Server-Error';
        } else if (error.response.status == 401) {
            window.location.href = '/Unauthorized';
        }
        else if (error.response.status == 400) {
            window.location.href = '/BadRequest';
        }
        else
            this._dispatch({ type: 'RECEIVE_HTTP_ERROR', response: error.response.data });
    }

在

App

组件中，导入历史对象并将其设置为

history

prop on

Router

组件的值

import { createBrowserHistory } from 'history';
export default createBrowserHistory();

返回(
...        
);

现在，您可以在任何文件中导入历史对象并使用它

p.S.

路由器

组件不是作为

路由器

导入的

浏览器路由器

组件。其较低级别的

路由器

组件采用名为

历史

的道具

有关详细信息，请参阅

演示： 在本演示中，向jsonplaceholder api发出请求以获取单个todo。如果请求成功，则显示todo。在发生错误的情况下，使用react router history对象显示错误组件

---

您能否提供一个示例。它更改了路由，但没有加载组件。当我使用window.location.href='/BadRequest'；它工作得很好。路线的定义是正确的，我相信，有些地方不对劲，我无法理解。我有“已连接的react路由器”：“6.8.0”，“react路由器”：“5.2.0”，“react路由器dom”：“5.2.0”，您是否将

历史
道具传递到
路由器
组件？我将错误的值传递到路由器，正如您所说，将历史道具传递到路由器组件起作用。谢谢
HandleServerError(error: any) {
        if (error.response.status == 500) {
            window.location.href = '/Internal-Server-Error';
        } else if (error.response.status == 401) {
            window.location.href = '/Unauthorized';
        }
        else if (error.response.status == 400) {
            window.location.href = '/BadRequest';
        }
        else
            this._dispatch({ type: 'RECEIVE_HTTP_ERROR', response: error.response.data });
    }

import { createBrowserHistory } from 'history';
export default createBrowserHistory();

return (
    <Router history={history}>
       ...        
    </Router>
);