วิธีการใช้การเรียกคืนแบบเลื่อนสำหรับ React Router SPA

ฉันกำลังสร้างแอปพลิเคชันหน้าเดียว React และฉันสังเกตว่าการคืนค่าการเลื่อนไม่ทำงานตามที่คาดไว้ใน Chrome (และเบราว์เซอร์อื่น ๆ )

ใน react-dom-gomub repo พวกเขามีหน้าเว็บที่บอกว่าเบราว์เซอร์เริ่มต้นจัดการการเลื่อนสำหรับแอพหน้าเดียวและพฤติกรรมจะคล้ายกับหน้าเว็บที่ไม่ใช่สปาแบบดั้งเดิมหากhistory.scrollRestorationตั้งค่าเป็นauto.

พฤติกรรมที่ฉันต้องการมีการระบุไว้ในหน้านั้น:

1. เลื่อนขึ้นบนการนำทางเพื่อไม่ให้หน้าจอใหม่เลื่อนไปที่ด้านล่าง
2. การคืนค่าตำแหน่งเลื่อนของหน้าต่างและองค์ประกอบที่เกินจากการคลิก "ย้อนกลับ" และ "ส่งต่อ" (แต่ไม่ใช่การคลิกลิงก์!)

แต่ฉันต้องปิดการทำงานของเส้นทางที่มีแท็บหรือม้าหมุนด้วย

นี่คือลิงค์ไปยังข้อมูลจำเพาะของ Chrome ในเรื่องนี้

สิ่งที่ฉันสังเกตใน Chrome เวอร์ชัน 78.0.3904.97 (รุ่นเป็นทางการ) (64 บิต) สำหรับ OS X คือสิ่งที่ฉันคาดหวังจากการhistory.scrollRestoration manualตั้งค่า นั่นคือเมื่อฉันเลื่อนหน้าเว็บลงครึ่งหนึ่งและฉันคลิกลิงก์หน้าถัดไปจะเลื่อนลงครึ่งหนึ่งของหน้าไปยังจุดเดียวกับหน้าก่อนหน้า

ฉันได้ตรวจสอบhistory.scrollRestorationจุดต่าง ๆ แล้วพบว่ามันเริ่มต้นและคงอยู่autoเป็นค่าเริ่มต้น

จุดสำคัญอย่างหนึ่งของที่นี่คือจากคำตอบของ @ TrevorRobinson "ความพยายามอัตโนมัติของเบราว์เซอร์ในการเรียกคืนการเลื่อน ... ... ส่วนใหญ่ไม่ทำงานสำหรับแอปหน้าเดียว ... " ตกลง ... ฉันพบการสนับสนุนที่สอดคล้องกันhistory.scrollRestorationแต่ เห็นได้ชัดว่าเบราว์เซอร์เบียดเสียดจริง ๆ แล้วทำการคืนค่าการเลื่อน จากนั้นควรสังเกตที่นี่ซึ่งจะช่วยฉันเวลาวันนี้

จากนั้นฉันค้นหาวิธีการทำสิ่งนี้ด้วยตนเองและฉันยังไม่ชัดเจนว่าจะไปข้างหน้าอย่างไร react-router-scrollบอกว่ามันเข้ากันไม่ได้กับ React Router v4 แต่ไม่ได้พูดถึง v5 ซึ่งปัจจุบันเป็นของคำถามนี้ ดังนั้นฉันควรสมมติว่า v5 นั้นเข้ากันไม่ได้หรือไม่

ดังนั้นฉันจึงมองไปข้างหน้าต่อไปและพบคำตอบนี้เกี่ยวกับวิธีจัดการการเรียกคืนการเลื่อนด้วย React Router v4 ... ฉันควรสมมติว่ามันจะใช้งานได้กับ React Router v5 หรือไม่ อัปเดต: ดูเหมือนจะไม่ทำงานสำหรับฉันใน v5 ฉันลองการกำหนดค่าหลายอย่าง ฉันไม่สามารถทำให้ React Router v4 ทำงานได้อย่างสมบูรณ์ ฉันรู้ว่ามันมีชีวิตอยู่อย่างน้อยมันก็เลื่อนไปข้างบนในหน้าใหม่ แต่การฟื้นฟูในประวัติศาสตร์จะไม่เกิดขึ้น

ฉันได้รับการตอบสนอง - router-scroll-memoryทำงาน แต่ไม่มีตัวเลือกสำหรับปิดการเลื่อนบนเส้นทางที่กำหนดเช่นสิ่งที่จำเป็นสำหรับแท็บหรือม้าหมุน ... ฉันอาจแฮ็คมันเพื่อให้ทำงานได้

ฉันถือว่าใช้oaf-react-routerแต่ไม่มีอะไรในเอกสารประกอบเกี่ยวกับการปิดใช้งานการเรียกคืนการเลื่อนหรือการเลื่อนไปด้านบนสำหรับเส้นทางบางเส้นทาง แก้ไข: จริง ๆ แล้วมันจัดการตามที่ระบุไว้ในคำตอบของฉัน

มีบางอย่างที่ฉันมองข้ามไปหรือไม่? มาตรฐานสำหรับการจัดการกับปัญหานี้คืออะไรเพราะฉันไม่สามารถเป็นคนเดียวที่ต้องการคุณสมบัตินี้ ดูเหมือนว่าฉันกำลังทำอะไรที่แปลก ๆ และเป็นเรื่องทดลอง แต่ฉันแค่ต้องการให้เว็บไซต์ของฉันเลื่อนเหมือนไซต์ทั่วไป

วิธีหนึ่งที่จะทำเช่นนี้คือมีคนโง่ทำปฏิกิริยาเตอร์ ใช้shouldHandleActionตัวเลือกในการตั้งค่า ฟังก์ชั่นได้รับการส่งผ่านpreviousLocationและnextLocationคุณสามารถใช้เพื่อพิจารณาว่าควรเลื่อนรีเซ็ต / กู้คืนหรือไม่และคืนค่าfalseถ้าไม่เลื่อน

const history = createBrowserHistory();

const settings = {
   shouldHandleAction: (previousLocation, nextLocation) => {
       // Inspect/compare nextLocation and/or previousLocation.
       return false // false if you don't want scroll restoration.
   }
};

wrapHistory(history, settings);

oaf-react-router ทำงานร่วมกับ React Router v4 และ v5 และจัดการการเข้าถึงที่เราเตอร์ SPA หลายตัวไม่ทำดังนั้นจึงอาจเป็นทางออกที่สมบูรณ์ที่สุดในเวลานี้

อยากรู้อยากเห็นเอกสารไม่ได้อธิบายเกี่ยวกับคุณสมบัตินี้

หากใครมีวิธีการแก้ปัญหาที่ใช้งานได้และจะได้รับการพิจารณาให้เป็นมาตรฐานมากขึ้นโปรดให้คำตอบที่นี่และฉันจะพิจารณาเปลี่ยนคำตอบที่เลือก