Как получить доступ к перехвату всех маршрутов после неудачного вызова ajax, не меняя URL с реакции на маршрутизатор

Question

У меня есть простое приложениеactjs, которое обращается к API остальных и хочет, чтобы оно обслуживало весь маршрут, когда API возвращает 404.

Так как я использую response-router-v4, я попытался this.props.history.push("/404");, который обслуживает правильный компонент, но также изменяет URL в браузере.Это изменение URL - то, что я не хочу

У меня есть следующий код

App.js

class App extends Component {
    render() {
        return (
            <Switch>
                <Route exact path='/' component={Calendar}/>
                <Route path='/day/:number' component={Day}/>
                <Route component={Error404}/>
            </Switch>
        );
    }
}

, а в Day.js я делаю что-то вроде

componentDidMount() {
    const dayNumber = parseInt(this.props.match.params.number);
    jQuery.ajax('http://localhost:9018/api/day/' + dayNumber)
        .done((result) => {
            this.setState({
                day: result
            });
        })
        .fail(() => {
            this.props.history.push("/404");
        });
}

Поэтому, когда я перехожу к URL-адресу, например /no-match, приложение отображает компонент Error404, в то время как URL-адрес остается /no-match <- правильный </p>

Когда я перехожу на /day/1приложение отображает компонент Day, а backend возвращает 200.URL остается на /day/1 <- правильный </p>

Когда я перехожу на /day/35, приложение отображает компонент Day, а бэкэнд возвращает 404.При перенаправлении компонент Error404 и URL-адрес изменяются на /404 <- это я не хочу. </p>

Так что я понимаю, что продвижение в историю, вероятно, неправильно.Но как я могу реализовать обобщенное решение, которое отображает Error404 для каждого неудачного вызова API во всем приложении?

Answer 1

Вы можете установить состояние 'status' в зависимости от результата:

componentDidMount() {
    const dayNumber = parseInt(this.props.match.params.number);
    jQuery.ajax('http://localhost:9018/api/day/' + dayNumber)
        .done((result) => {
            this.setState({
                day: result, status: 'SUCCESS',
            });
        })
        .fail(() => {
            this.setState({ status: 'ERROR' })
        });
}

И затем при рендеринге вы можете показать понравившийся компонент:

render() {
    return (
      <div>
        {this.state.status === 'SUCCESS' ? 'show day content' : 'show ErrorComponent'}
      </div>
    );
  }

В зависимостина весь контекст вашего приложения createMemoryHistory от реакции-маршрутизатора также может стоить посмотреть, но, насколько я знаю, он используется только для тестов / собственных приложений.