从服务层路由 React 组件

Question

ReactDOM.render(    <Provider store={store}>        <ConnectedRouter history={history}>            <App />        </ConnectedRouter>    </Provider>,    document.getElementById('root'));我使用服务层与 Web API 通信并集中 API 调用和 HTTP 错误处理。export class HttpClient {constructor(dispatch: any) {        this.axios = require('axios');        this._dispatch = dispatch;    }    public Post<T>(apiEndpoint: any, payload: T) {        return this.axios.post(apiEndpoint, payload)            .catch((error: any) => {                this.HandleServerError(error);            });    }}HTTP 错误处理。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 });    }我不想使用来自 HTTP 服务层的window.location.href 。如何使用 React 路由器来维护历史记录？

Answer 1

您可以在单独的文件中创建history对象并从该文件中导出该对象

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

在App组件中，导入历史对象并将其设置为组件history上的 prop值Router

return (

    <Router history={history}>

       ...        

    </Router>

);

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

PS Router组件不是BrowserRouter导入为Router. 它的较低级别Router组件采用名为history.

有关更多详细信息，请参阅反应路由器文档

演示：

在此演示中，向 jsonplaceholder api 发出请求以获取单个待办事项。如果请求成功，将显示 todo。如果发生错误，错误组件会使用反应路由器历史对象显示。