ReactJS с React Router — странное поведение маршрутизации в Chrome

Это немного странно, и я хотел бы добраться до сути.

У меня есть страница, на которой пользователи вводят свой адрес электронной почты и нажимают кнопку, а затем я показываю: «Вы зарегистрированы!» сообщение - простое.

Для этого у меня есть два пути. Основной маршрут и «заказной» маршрут.

  <Route name="app" path="/" handler={Main}>
    <Route name="signed-up" path="signed-up" handler={SignedUp} />
    <DefaultRoute handler={Signup} />
  </Route>

На первой странице, когда пользователи вводят адрес электронной почты и нажимают кнопку, я запускаю POST AJAX, чтобы сохранить адрес электронной почты в моей серверной базе данных (используя пакет Axios), и когда это завершено, я перехожу к маршруту «зарегистрирован». .

  handleSubmit() {
    var router = this.context.router;
    var email  = this.refs.email.getDOMNode().value;
    this.refs.email.getDOMNode().value = '';

    helpers.postSignupEmail(email).then((response) => {
      // then display the signed up page
      router.transitionTo("signed-up");
    });
  }

Теперь, когда я впервые ввожу URL своей страницы

http://localhost:1338

Браузеры (Chrome, FireFox, Safari), похоже, все меняют URL-адрес на

http://localhost:1338/#/

Справедливо. В FireFox я набираю адрес электронной почты и нажимаю кнопку отправки, все работает хорошо и приводит меня к

http://localhost:1338/#/signed-up

Однако теперь в Chrome, когда я нажимаю «Отправить», маршрут не меняется. На самом деле в консоли разработчика я вижу ошибку.

введите здесь описание изображения

Во-первых, почему был отменен запрос на "публикацию"? Во-вторых, когда это происходит, Chrome не отвечает. Итак, я обновляю страницу, а затем получаю «морскую смерть экрана» Chrome.

введите здесь описание изображения

Теперь, как ни странно, если я изменю первоначальный URL на

http://localhost:1338/?#/

(вставив вопросительный знак перед решеткой), тогда в Chrome все работает нормально. Итак, это заставляет меня задуматься, что это как-то связано с моими путями или параметрами маршрута.

Любые идеи?


reactjs javascript axios
person ericbae    schedule 08.07.2015    source источник
comment
Вы пробовали использовать только HistoryLocation API? Вместо хеш-адресов.   -  person Henrik Andersson    schedule 09.07.2015

Ответы (1)


arrow_upward
15
arrow_downward

Буквально несколько часов назад столкнулся с этой проблемой.

Итак, у вас есть что-то подобное в вашем компоненте (синтаксис es6):

render() {
    return (
        <form onSubmit={ this.submit.bind(this) }>
            { /* inputs stuff here */ }
        </form>
    );
}

submit() {
    // Ajax request here
}

Проблема в том, что Chrome пытается отправить запрос на получение и добавляет ? к вашему текущему URL-адресу, потому что у вас нет action="/formsubmit" в теге формы, и по умолчанию он считает, что это method="get". Таким образом, Chrome берет текущий URL-адрес (например, myapp.com/#/) и пытается отправить форму по адресу myapp.com/?#/, который является новым URL-адресом.

Чтобы предотвратить это, просто добавьте preventDefault при отправке формы.

submit(e) {
    e.preventDefault()
    // Ajax request here
}
person martpie    schedule 14.09.2015
comment
Я бы щелкнул стрелку вверх 10 раз, если бы мог. Я столкнулся с этим сценарием с Angular 2 RC6 и провел дни, гоняясь за своим хвостом, отслеживая маршрутизатор, пытаясь понять, что происходит. Затем я увидел ваше объяснение здесь - Фейерверки и церковные колокола! Я понятия не имел, что нажатие на кнопку без отправки может привести к отправке. В конце концов, чтобы решить мою проблему, мне просто нужно было изменить ‹button› на ‹span›. Спасибо, что поделились своим пониманием! - person ckapilla; 12.09.2016
comment
@ckapilla Я рекомендую вам использовать тег ‹button›, так как он более корректен с точки зрения семантики и приводит к более чистому коду: для отправки формы вы всегда должны использовать событие отправки + preventDefault, если это необходимо. - person martpie; 12.09.2016
comment
@KeitlG спасибо за этот вклад, однако в моем случае я не хочу отправлять форму, а просто ссылаюсь на другую форму. Тот факт, что отправка происходила без какого-либо намерения, заставил меня зациклиться. - person ckapilla; 14.09.2016