Как перенаправить на маршрут из внешней функции в ReactJS

Question

Это мой компонент, который представляет страницу входа в систему

import { HttpService } from 'src/assets/js/httpservice';
// ** omissis other imports **

export default class PrivatePage extends React.Component {
    constructor(props) {
        super(props);
    }

    public render() {
        return (
            <div>
                <ul>
                    <li>
                        <InputText name="Text" id="Text" />
                    </li>
                    <li>
                        <InputText name="Email" id="Email" />
                    </li>
                    <li>
                        <Button onClick={this.send} label="Send ticket" />
                    </li>
                </ul>
            </div>
        )
    }

    private send() {
        HttpService.post(PATH.sendTicket, this.state.ticketModel).then(data => {
            if (data.ErrorCode === 0) {
                this.setState({
                    sentSuccessfull: true
                });
            }
            else {
                // show an error popup
            }
        });
    }
}

Когда нажата кнопка «Отправить заявку», он вызывает метод HttpService.post, чтобы вызвать API для отправки заявки в систему.,Как вы можете видеть в разделе импорта, HttpService размещается во внешнем файле JS.Это код метода HttpService.post.

public static async post(path, body) {

    return window.fetch(path, {
        body: JSON.stringify(body),
        cache: "no-cache",
        method: "post"
    })
        .then(data => {
            // call successfull
        })
        .catch(data => {
            if (data.status === 401) {
                // REDIRECT HERE
            }
            else {
                return data.json();
            }
        });
}

Теперь, если вызов API завершается неудачно из-за того, что пользователь не аутентифицирован (возвращается статус HTTP 401), мне нужно перенаправить пользователя на страницу входа.стр.Я бы избегал обработки статуса HTTP 401 в каждом компоненте, поэтому я предпочитаю, чтобы перенаправление осуществлялось непосредственно внутри метода HttpService.post.

Answer 1

попробуйте ниже и дайте мне знать, если это работает для вас, измените сторону сервера следующим образом:

public static async post(path, body) {

    return window.fetch(path, {
        body: JSON.stringify(body),
        cache: "no-cache",
        method: "post"
        })
        .then(data => {
            // call successfull
        })
        .catch(data => {
            // server side redirect below:
            if (data.status === 401) {
              data.redirect(url, 401)
            }
            else {
            return data.json();
            }
        });
}

А затем на стороне клиента сделайте следующее:

     private send() {
     const { history } = this.props 
        HttpService.post(PATH.sendTicket, this.state.ticketModel).then(data => {
            if (data.ErrorCode === 0) {
                this.setState({
                    sentSuccessfull: true
                });
            }
        }).catch(err => {
          hirstory.push('/your-route-here')
        })
      }

В качестве альтернативыесли вы не используете реагирующий маршрутизатор, вместо использования history.push вы можете использовать

location.href = '/your-route-here'

или что-то в этом роде, однако использование метода location.href очистит состояние вашего приложения, фактически ведя себя так, как будто выобновил страницу.

Дайте мне знать, если это поможет

Ллойд