ReactJS dengan React Router - perilaku perutean yang aneh di Chrome

Ini agak aneh dan saya ingin memahaminya.

Saya memiliki halaman tempat pengguna mengetikkan alamat email mereka dan mengklik tombol lalu saya tunjukkan "Anda sudah mendaftar!" pesan - sederhana.

Untuk itu, saya punya dua rute. Rute utama dan rute "mendaftar".

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

Di halaman pertama, ketika pengguna mengetikkan alamat email dan mengklik tombol, saya mengaktifkan POST AJAX untuk menyimpan alamat email di DB backend saya (menggunakan paket Axios) dan setelah selesai, saya pergi ke rute "mendaftar" .

  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");
    });
  }

Sekarang ketika saya pertama kali mengetikkan URL halaman saya

http://localhost:1338

Browser (Chrome, FireFox, Safari), semua sepertinya mengubah URL menjadi

http://localhost:1338/#/

Cukup adil. Di FireFox, saya mengetikkan email dan mengklik tombol kirim, semuanya berfungsi dengan baik dan membawa saya ke sana

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

Namun sekarang di Chrome, ketika saya mengklik kirim, itu tidak mengubah rute. Faktanya, di konsol pengembang, saya melihat kesalahan.

masukkan deskripsi gambar di sini

Pertama, mengapa permintaan "postingan" dibatalkan? Kedua, jika ini terjadi, Chrome tidak responsif. Jadi saya menyegarkan halaman, lalu saya mendapatkan "kematian layar angkatan laut" Chrome.

masukkan deskripsi gambar di sini

Nah, lucunya jika saya mengubah URL awal menjadi

http://localhost:1338/?#/

(memasukkan tanda tanya di depan hash), maka semuanya berfungsi dengan baik di Chrome. Jadi, saya bertanya-tanya apakah ini ada hubungannya dengan jalur atau parameter rute saya.

Ada ide?


reactjs javascript axios
person ericbae    schedule 08.07.2015    source sumber
comment
Sudahkah Anda mencoba menggunakan API HistoryLocation? Alih-alih url hash.   -  person Henrik Andersson    schedule 09.07.2015

Jawaban (1)


arrow_upward
15
arrow_downward

Baru saja menghadapi masalah ini beberapa jam yang lalu.

Jadi Anda memiliki sesuatu seperti itu di komponen Anda (sintaks es6):

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

submit() {
    // Ajax request here
}

Masalahnya adalah Chrome mencoba mengirim permintaan dapatkan, dan menambahkan ? ke URL Anda saat ini, karena Anda tidak memiliki action="/formsubmit" di tag formulir Anda dan secara default dianggap sebagai method="get". Jadi Chrome mengambil URL saat ini (misalnya myapp.com/#/) dan mencoba mengirimkan formulir di myapp.com/?#/, yang merupakan URL baru.

Untuk mencegahnya, cukup tambahkan preventDefault saat Anda mengirimkan formulir Anda

submit(e) {
    e.preventDefault()
    // Ajax request here
}
person martpie    schedule 14.09.2015
comment
Saya akan mengklik panah atas 10 kali jika saya bisa. Saya telah mengalami skenario ini dengan Angular 2 RC6 dan menghabiskan waktu berhari-hari mengejar ekor saya, menelusuri router, mencoba mencari tahu apa yang sedang terjadi. Lalu saya melihat penjelasan Anda di sini -- Kembang api dan lonceng gereja! Saya tidak tahu bahwa mengklik tombol non-kirim dapat menyebabkan pengiriman. Pada akhirnya, untuk memperbaiki masalah saya, saya hanya perlu mengubah ‹button› menjadi ‹span›. Terima kasih telah berbagi wawasan Anda! - person ckapilla; 12.09.2016
comment
@ckapilla Saya mendorong Anda untuk menggunakan tag ‹button› karena lebih benar secara sementis dan mengarah ke kode yang lebih bersih: untuk pengiriman formulir, Anda harus selalu menggunakan acara pengiriman, + preventDefault jika diperlukan. - person martpie; 12.09.2016
comment
@KeitlG terima kasih atas masukannya, namun dalam kasus saya, saya tidak ingin mengirimkan formulir, hanya menautkan ke formulir lain. Fakta bahwa pengiriman terjadi tanpa ada niat untuk melakukannya adalah hal yang membuat saya bingung. - person ckapilla; 14.09.2016