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's "navy screen death"..

ป้อนคำอธิบายรูปภาพที่นี่

เอาล่ะ น่าตลกดีหากฉันเปลี่ยน URL เริ่มต้นเป็น

http://localhost:1338/?#/

(ใส่เครื่องหมายคำถามหน้าแฮช) จากนั้นทุกอย่างจะทำงานได้ดีบน Chrome ดังนั้นฉันจึงสงสัยว่าเกี่ยวข้องกับเส้นทางหรือพารามิเตอร์เส้นทางของฉัน

มีความคิดอะไรบ้าง?


reactjs javascript axios
person ericbae    schedule 08.07.2015    source แหล่งที่มา
comment
คุณได้ลองใช้ HistoryLocation API แล้วหรือยัง? แทนที่จะเป็น URL แฮช   -  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 และใช้เวลาหลายวันในการไล่ตามหางของฉัน ติดตามผ่านเราเตอร์ พยายามค้นหาว่าเกิดอะไรขึ้น จากนั้นฉันก็เห็นคำอธิบายของคุณที่นี่ - ดอกไม้ไฟและระฆังโบสถ์! ฉันไม่รู้ว่าการคลิกปุ่มไม่ส่งอาจทำให้เกิดการส่งได้ ท้ายที่สุด เพื่อแก้ไขปัญหาของฉัน ฉันแค่ต้องเปลี่ยน ‹ปุ่ม› เป็น ‹span› ขอบคุณสำหรับการแบ่งปันข้อมูลเชิงลึกของคุณ! - person ckapilla; 12.09.2016
comment
@ckapilla ฉันขอแนะนำให้คุณใช้แท็ก ‹button› เนื่องจากมีความถูกต้องเชิงเซกเมนต์มากกว่าและนำไปสู่โค้ดที่สะอาดกว่า: สำหรับการส่งแบบฟอร์ม คุณควรใช้เหตุการณ์การส่งเสมอ + ป้องกันค่าเริ่มต้น หากจำเป็น - person martpie; 12.09.2016
comment
@KeitlG ขอบคุณสำหรับข้อมูลนั้น แต่ในกรณีของฉัน ฉันไม่ต้องการส่งแบบฟอร์ม แค่ลิงก์ไปยังแบบฟอร์มอื่น ความจริงที่ว่าการส่งเกิดขึ้นโดยไม่ได้ตั้งใจที่จะทำเช่นนั้น เป็นสิ่งที่ทำให้ฉันต้องวนซ้ำ - person ckapilla; 14.09.2016