เราเตอร์ React หยุดทำงานหลังจากเพิ่ม createBrowserHistory ด้วย saga

ฉันกำลังเรียนรู้ React.js และฉันประสบปัญหาต่อไปนี้:

แอปโต้ตอบของฉันหยุดทำงานหลังจากเพิ่ม createBrowserHistory ด้วย Saga

โดยพื้นฐานแล้ว ฉันต้องการเปลี่ยนเส้นทางผู้ใช้ไปยังหน้ารถเข็น (/cart) เมื่อฉันคลิกที่ปุ่มเพิ่มลงตะกร้า

ตัวอย่าง:

นั่นคือหน้าแรก:

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

เมื่อฉันคลิกที่ปุ่ม Add to Cart ระบบจะนำทางไปยังเส้นทาง /cart อย่างไรก็ตาม มันไม่แสดงอะไรเลย และไม่มีข้อผิดพลาดในคอนโซล

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

ฉันได้ทำการเปลี่ยนแปลงต่อไปนี้ในรหัสของฉัน:

เพิ่มแพ็คเกจประวัติ:

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

ไฟล์ประวัติที่สร้างขึ้น:

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

ไฟล์ App.js ที่เปลี่ยนแปลง:

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

ไฟล์ Saga ที่เปลี่ยนแปลง ฉันคาดว่าจะนำทางไปยังเส้นทาง /cart หลังจากทำงานบางอย่าง...

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

ปัญหาอยู่ที่นี่แล้ว! ฉันต้องการแก้ไขปัญหาในไฟล์ Saga ของฉันเท่านั้น

ฉันได้สร้าง Pull Request ที่นี่ เพื่อสร้างข้อผิดพลาดซ้ำ อย่าลังเลที่จะดูสิ่งนี้

https://github.com/willianfalbo/online-shoes-app/pull/1

ฉันยินดีที่จะให้รางวัลคนที่สร้าง PR ให้ฉัน ฉันจะยอมรับคำตอบของคุณที่นี่ด้วย!


reactjs javascript react-redux redux-saga
person Willian    schedule 22.08.2020    source แหล่งที่มา
comment
ทำไมคุณถึงต้องการ createBrowserHistory ประวัติตั้งแต่แรก? เมื่อ redux-saga ของคุณทำการเรียก api และหลังจากประสบความสำเร็จ จะดีกว่าไหมถ้าคุณคืนการควบคุมไปยังส่วนประกอบ React ของคุณเพื่อดำเนินการในภายหลัง หมายความว่าคุณสามารถเปลี่ยนเส้นทางใน React component ของคุณแทนใน sagas ได้อย่างง่ายดาย ซึ่งจะทำให้การใช้ createBrowserHistory เป็นโมฆะตั้งแต่แรก..   -  person Prateek Thapa    schedule 22.08.2020
comment
ลองเปลี่ยนเป็น yield call(history.push, '/cart');   -  person Aleksey L.    schedule 22.08.2020
comment
@AlekseyL. ฉันลองวิธีนี้แล้วแต่ไม่ได้ผล   -  person Willian    schedule 23.08.2020
comment
@ PrâtéékThápá คุณมีตัวอย่างบ้างไหม?   -  person Willian    schedule 23.08.2020
comment
คุณสามารถทดสอบด้วย MemoryHistory และดูว่ายังคงใช้งานไม่ได้ในบริบทนั้นหรือไม่ ไม่ใช่วิธีแก้ปัญหา แต่อาจอธิบายบางสิ่งบางอย่างให้กระจ่าง   -  person Slbox    schedule 04.09.2020
comment
ขอบคุณ @Slbox! คุณมีตัวอย่างลิงค์หรือไม่?   -  person Willian    schedule 04.09.2020
comment
@วิลเลียนแทนที่จะนำเข้า createBrowserHistory ให้นำเข้า createMemoryHistory เรายังอยู่ที่ [email protected] แต่ฉันคิดว่ามันน่าจะยังใช้งานได้ใน 5.x   -  person Slbox    schedule 04.09.2020

คำตอบ (1)


arrow_upward
1
arrow_downward

ดูเหมือนว่า react-router เวอร์ชัน 5x จะเข้ากันได้กับ history.4x เท่านั้น

การดาวน์เกรดเวอร์ชันประวัติเป็น 4.2.0 ใช้งานได้

person Prateek Thapa    schedule 23.08.2020
comment
@Willian ฉันได้ส่ง PR แล้ว - person Prateek Thapa; 04.09.2020
comment
สุดยอดครับพี่! ขอบคุณที่สร้าง PR ให้ฉัน! เยี่ยมมาก. ฉันไม่สามารถให้รางวัลคุณได้ในตอนนี้ เพราะฉันต้องรอถึง 24 ชั่วโมงจึงจะทำเช่นนั้นได้ อย่างไรก็ตาม ขณะที่ฉันยอมรับคำตอบของคุณ StackOverflow คุณจะให้รางวัลคุณโดยอัตโนมัติ ไชโย - person Willian; 04.09.2020
comment
ฉันแค่อยากรู้ คุณกำลังสร้างมันขึ้นมาเพื่อการใช้งานจริงหรือเพียงแค่แอปฝึกหัด? - person Prateek Thapa; 04.09.2020
comment
เป็นเพียงการฝึกซ้อมเมื่อฉันเริ่มเรียนรู้ React เมื่อเดือนที่แล้ว คุณมีข้อเสนอแนะหรือไม่? ความช่วยเหลือใด ๆ ที่คุณยินดีต้อนรับ =) - person Willian; 04.09.2020
comment
ฉันรู้สึกเหมือนคุณทำสิ่งต่างๆ มากเกินไป ฉันได้เขียนแอปที่ใช้งานจริงสองสามแอปใน React ฉันไม่คิดว่าคุณจะต้อง sagas เพื่อเริ่มต้น Redux thunk จะทำ นอกจากนี้ แอปของคุณยังสามารถใช้ Context API แทนที่จะใช้ Redux ได้ด้วย กล่าวโดยสรุป แอปของคุณสามารถใช้ Context API ได้ ไม่จำเป็นต้องใช้ redux, redux-sagas และ immer - person Prateek Thapa; 04.09.2020
comment
นั่นเป็นเคล็ดลับที่ยอดเยี่ยมเลยเพื่อน! ฉันค่อนข้างผิดหวังมากกับการใช้ Redux/Saga ในความคิดของฉัน มันซับซ้อนและซับซ้อนมากเกินไป แน่นอน ฉันจะเริ่มศึกษา Context API มีคอร์สออนไลน์แนะนำมั้ยคะ? - person Willian; 04.09.2020
comment
คุณสามารถดูสิ่งนี้ มันไม่ซับซ้อน คุณสามารถหนีไปได้เพียงแค่ กำลังอ่านเอกสาร - person Prateek Thapa; 04.09.2020
comment
ขอบคุณเพื่อน! - person Willian; 05.09.2020
comment
ขอบคุณสำหรับสิ่งนี้ - เพิ่งช่วยชีวิตฉันไว้ :) - person Ege; 03.03.2021