Cách triển khai khôi phục cuộn cho React Router SPA

Tôi đang xây dựng một ứng dụng một trang React và tôi nhận thấy việc khôi phục cuộn dường như không hoạt động như mong đợi trong Chrome (và có thể các trình duyệt khác.)

Trên repo Reac-router-dom github, họ có một trang nói rằng các trình duyệt đang bắt đầu xử lý việc cuộn đối với các ứng dụng trang đơn và hành vi sẽ tương tự như trang web không phải là SPA truyền thống, nếu history.scrollRestorationđược đặt thành auto.

Hành vi tôi cần được chỉ định trên trang đó:

Cuộn lên trên điều hướng để bạn không bắt đầu một màn hình mới cuộn xuống phía dưới.

Khôi phục vị trí cuộn của cửa sổ và các phần tử tràn trên các lần nhấp "quay lại" và "chuyển tiếp" (nhưng không phải nhấp vào Liên kết!)

Nhưng tôi cũng cần phải vô hiệu hóa hành vi cho các tuyến đường có chứa tab hoặc băng chuyền.

Đây là một liên kết đến thông số kỹ thuật của Chrome về vấn đề này .

Những gì tôi đang quan sát trong Phiên bản Chrome 78.0.3904.97 (Bản dựng chính thức) (64 bit) cho OS X, là những gì dường như là những gì tôi mong đợi từ history.scrollRestoration manualcài đặt. Đó là, khi tôi cuộn một nửa trang xuống và tôi nhấp vào một liên kết, trang tiếp theo được cuộn xuống một nửa trang, đến cùng điểm với trang trước đó.

Tôi đã kiểm tra history.scrollRestorationcác điểm khác nhau và thấy nó bắt đầu và ở lại auto, mặc định,

Một điểm quan trọng ở đây là từ câu trả lời của @ TrevorRobinson "các nỗ lực tự động của trình duyệt khi khôi phục cuộn ... ... hầu như không hoạt động cho các ứng dụng một trang ..." Ok ... Tôi đã tìm thấy sự hỗ trợ nhất quán cho history.scrollRestoration, nhưng rõ ràng các trình duyệt rất tệ khi thực sự khôi phục cuộn. Sau đó, điều đó cần được lưu ý ở đây , mà sẽ giúp tôi tiết kiệm thời gian ngày hôm nay.

Sau đó, tôi tìm kiếm các cách để làm điều này bằng tay, và tôi không rõ con đường phía trước. react-router-scrollnói rằng nó không tương thích với React Router v4, nhưng không đề cập đến v5, hiện tại là câu hỏi này. Vậy tôi có nên cho rằng v5 cũng không tương thích?

Vì vậy, tôi tìm kiếm thêm một hướng đi và tìm thấy câu trả lời SO này về cách xử lý khôi phục cuộn với React Router v4 ... Tôi có nên cho rằng nó sẽ hoạt động với React Router v5 không? Cập nhật: Nó không xuất hiện để làm việc cho tôi trong v5. Tôi đã thử một vài cấu hình. Tôi cũng không thể làm cho nó hoàn toàn hoạt động với React Router v4. Tôi biết rằng nó đã trở nên sống động ít nhất, vì nó đã cuộn lên đầu trên một trang mới, nhưng sự phục hồi trong lịch sử không xảy ra.

Tôi cũng đã làm cho bộ nhớ-bộ-cuộn-bộ nhớ hoạt động, nhưng nó không có tùy chọn để vô hiệu hóa cuộn trên các tuyến được chỉ định, như những gì cần thiết cho các tab hoặc băng chuyền ... Tôi có thể hack nó để nó hoạt động.

Tôi đã cân nhắc sử dụng oaf-Reac-router , nhưng nó không nói gì trong tài liệu về việc vô hiệu hóa khôi phục cuộn hoặc cuộn lên trên cho các tuyến nhất định. Chỉnh sửa: Nó thực sự xử lý điều này, như được nêu trong câu trả lời của tôi.

Có điều gì tôi đã bỏ qua? Tiêu chuẩn để xử lý vấn đề này là gì, vì tôi không thể là người duy nhất cần tính năng này. Có vẻ như tôi đang làm một cái gì đó sắc nét và thử nghiệm, nhưng tôi chỉ cần trang web của mình để cuộn như một trang web bình thường.

— BBaysinger
nguồn

Bạn nên xem Nextjs , họ đã thực hiện điều này thông qua bộ nhớ cache lịch sử.

— Jurrian

Mát mẻ! Tôi sẽ xem xét kỹ hơn khi tôi có thể đi xuống từ dự án này.

— BBaysinger

Một cách để làm điều này là với oaf-Reac-router . Sử dụng các shouldHandleActiontùy chọn trong cài đặt. Hàm được truyền previousLocationvà nextLocationbạn có thể sử dụng để xác định xem cuộn có nên được đặt lại / khôi phục hay không và trả về falsenếu không.

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-Reac-router hoạt động với React Router v4 và v5 và xử lý khả năng truy cập, trong đó nhiều bộ định tuyến SPA không có, vì vậy đây có thể là giải pháp hoàn chỉnh nhất tại thời điểm này.

Thật kỳ lạ, tài liệu không nói chi tiết về tính năng này.

Nếu bất cứ ai khác có một giải pháp hoạt động và sẽ được coi là tiêu chuẩn hơn, vui lòng cung cấp câu trả lời với nó ở đây và tôi sẽ xem xét thay đổi câu trả lời đã chọn.

— BBaysinger
nguồn