React Router - History một khái niệm cơ bản
TIL
608
@100daysTIL
72
White

Minh-Trung Nguyễn viết ngày 26/03/2018

React Router - History một khái niệm cơ bản

Day33:

history

Từ "history", và "object history" trong phần bên dưới đây là một, liên quan đến package history. Package history là 1 trong 2 dependencies quan trọng của thư viện React Router, nó cung cấp những cách làm khác nhau để quản lý "session history" trong JavaScript ở rất nhiều môi trường.

Ghi chú:

  • history ở đây ("có lẽ") khác với object history của Window.history (xem ở đây). Thông qua Window.history, ta có thể tác động đến "session history" của trình duyệt (danh sách những trang được mở trong mỗi tab hoặc frame, tính vào thời điểm trang web hiện thời đang được chạy).
  • Ngoài "browswer history" (số 1), hóa ra còn có "hash history" (số 2), và "memory history" (số 3) mà người ta sẽ cần chọn để phù hợp với yêu cầu. Sau có thể tham khảo thêm bài "A little bit of history" của Paul Sherman trên Medium. Cái này quan trọng.

Object history thường có những thuộc tính và method sau:

length

  • kiểu number
  • đây là số entry bên trong history stack (tạm dịch là ngăn xếp history)

action:

  • kiểu string
  • đây là action hiện tại (PUSH, REPLACE, hoặc POP)

location:

  • kiểu object
  • đây là location hiện tại.

Trong location lại có thể có những thuộc tính sau:

  • pathname: kiểu string - là path của URL
  • search: kiểu string - là URL string đem đi query
  • hash: kiểu string - là đoạn URL đã được băm (hashed)
  • state: kiểu object - là state gán với location nào đó, được cung cấp cho 1 method nào đấy, ví dụ push(path, state) khi location này được tống vào trong stack. Thuộc tính này chỉ áp dụng với "browser history" và "memory history".

push(path, [state]):

  • method,
  • giúp tống 1 entry mới vào history stack.

replace(path, [state]):

  • method,
  • giúp thay thế entry hiện tại trong history stack.

go(n)

  • method,
  • giúp dịch con trỏ (pointer) trong history stack đi n entry.

goBack():

  • method, tương đương với go(-1).

goForward():

  • method, tương đương với go(1).

block(prompt):

  • method, có tác dụng không cho phép chuyển trang.

history có thể bị thay đổi

Object history có thể bị thay đổi (mutable). Do vậy, người ta khuyến cáo truy cập object location từ props của component, thay vì từhistory.location`.

Cần tìm hiểu sau

  • Khác biệt giữa "browser history", "hash history", và "memory history"?
  • Lúc nào dùng bạn nào? ngminhtrung 26-03-2018
Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Minh-Trung Nguyễn

58 bài viết.
74 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
44 15
Đăng lại một bài đã viết từ cách đây mấy tháng. Chủ đề này đã có không ít, nhưng chẳng hiểu sao lượng bài tự viết của dân lập trình người Việt ta v...
Minh-Trung Nguyễn viết 4 tháng trước
44 15
White
27 5
Ghi chú: Tiêu đề hoàn toàn mang tính câu view. Bài copy từ blog của tác giả :) Tại sao lại có bài viết này? Một ngày đẹp giời tôi cần kiểm t...
Minh-Trung Nguyễn viết 8 tháng trước
27 5
White
16 4
Về bước tìm và xử lý dữ liệu của Việt Nam phục vụ Data Visualization nền web Làm việc với D3js được nửa năm, một trong những điều bận lòng là chưa...
Minh-Trung Nguyễn viết 3 tháng trước
16 4
Bài viết liên quan
White
0 2
fCC: Technical Documentation Page note So I have finished the HTML part of this exercise and I want to come here to lament about the lengthy HTML ...
HungHayHo viết 2 tháng trước
0 2
White
19 1
Toán tử XOR có tính chất: + A XOR A = 0 + 0 XOR A = A Với tính chất này, có thể cài đặt bài toán sau với độ phức tạp O(N) về runtime, và với O(1)...
kiennt viết gần 2 năm trước
19 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
58 bài viết.
74 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!