从服务层路由 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值Routerreturn (&nbsp; &nbsp; <Router history={history}>&nbsp; &nbsp; &nbsp; &nbsp;...&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; </Router>);现在您可以在任何文件中导入历史对象并使用它。PS Router组件不是BrowserRouter导入为Router. 它的较低级别Router组件采用名为history.有关更多详细信息，请参阅反应路由器文档演示：在此演示中，向 jsonplaceholder api 发出请求以获取单个待办事项。如果请求成功，将显示 todo。如果发生错误，错误组件会使用反应路由器历史对象显示。