从服务层路由React组件

Question

ReactDOM.render(
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <App />
        </ConnectedRouter>
    </Provider>,
    document.getElementById('root'));

我使用服务层与web通信，并集中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支柱在Router组件上的值。

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

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

P.S. Router组件不是以Router形式导入的BrowserRouter组件。它的低级Router组件，它接受一个名为history的道具。

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

演示：

在本演示中，将向jsonplaceholder发出请求，以获取单个待办事项。如果请求成功，则显示待办事项。如果出现错误，则使用react路由器历史对象显示错误组件。

​

​