Маршрутизация компонента React из уровня сервиса - PullRequest
Новая
       110

Маршрутизация компонента React из уровня сервиса

1 голос
/ 21 июня 2020 
ReactDOM.render(
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <App />
        </ConnectedRouter>
    </Provider>,
    document.getElementById('root'));

Я использую уровень сервиса для связи с веб-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 });
    }

Я не хочу использовать window.location.href из уровня службы HTTP. Как я могу использовать маршрутизатор React, чтобы история сохранялась?

1 Ответ

2 голосов
/ 21 июня 2020

Вы можете создать объект history в отдельном файле и экспортировать этот объект из этого файла 

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

В компоненте App импортируйте объект истории и установите его как значение history prop on Router component 

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

Теперь вы можете импортировать объект истории в любой файл и использовать его.

PS Router компонент не BrowserRouter компонент импортирован как Router. Его компонент нижнего уровня Router, который принимает свойство с именем history.

, для получения дополнительных сведений см. response router docs

Demo:

В этой демонстрации делается запрос к jsonplaceholder api для получения одного задания. Если запрос выполнен успешно, отображается список задач. В случае ошибки компонент ошибки отображается с помощью объекта истории реактивного маршрутизатора.

Править long-Darkness-fie19

...