Tôi mới làm quen với lập trình khiến mọi thứ hơi khó hiểu đối với tôi nếu tôi đọc các tài liệu chính thức.

Tôi đã đọc về React Router 4 từ đây

Trong bài viết này, tác giả đã nói về <HashRouter>và<BrowserRouter>

Đây là những gì anh ấy đã đề cập

Về cơ bản, HashRouter sử dụng hàm băm trong URL để hiển thị thành phần. Vì tôi đang xây dựng một trang web tĩnh một trang, tôi cần sử dụng cái này.

BrowserRouter , nó sử dụng API lịch sử HTML5 để hiển thị thành phần. Lịch sử có thể được sửa đổi thông qua pushState và ReplaceState. Tìm thêm thông tin tại đây

Bây giờ, tôi không hiểu ý nghĩa và các trường hợp sử dụng cho cả hai, Giống như ý của anh ấy khi anh ấy nói lịch sử có thể được sửa đổi thông qua pushState và ReplaceState và nó sử dụng hàm băm trong URL để hiển thị thành phần

Trong khi lời giải thích đầu tiên về BrowserRouter hoàn toàn mơ hồ đối với tôi, thì lời giải thích thứ hai về HashRouter cũng không có ý nghĩa gì, như tại sao ai đó lại sử dụng Hash (#) trong url để hiển thị thành phần?

BrowserRouter

Nó sử dụng API lịch sử , tức là nó không khả dụng cho các trình duyệt cũ (IE 9 trở xuống và các phiên bản cùng thời). Ứng dụng React phía máy khách có thể duy trì các tuyến sạch như example.com/react/route nhưng cần được hỗ trợ bởi máy chủ web. Thông thường, điều này có nghĩa là máy chủ web phải được định cấu hình cho ứng dụng một trang, tức là cùng index.htmlđược phân phát cho / phản ứng / đường dẫn tuyến hoặc bất kỳ tuyến nào khác trên phía máy chủ. Về phía máy khách, window.location.pathnameđược phân tích cú pháp bởi bộ định tuyến React. Bộ định tuyến React kết xuất một thành phần mà nó đã được cấu hình để hiển thị cho / react / route .

Ngoài ra, thiết lập có thể liên quan đến kết xuất phía máy chủ, index.htmlcó thể chứa các thành phần hoặc dữ liệu được kết xuất cụ thể cho tuyến đường hiện tại.

HashRouter

Nó sử dụng hàm băm URL, nó không có giới hạn trên các trình duyệt hoặc máy chủ web được hỗ trợ. Định tuyến phía máy chủ độc lập với định tuyến phía máy khách.

Ứng dụng một trang tương thích ngược có thể sử dụng nó như example.com/#/react/route . Không thể sao lưu thiết lập bằng kết xuất phía máy chủ vì đó là / đường dẫn được phân phát ở phía máy chủ, hàm băm URL # / react / route không thể đọc được từ phía máy chủ. Về phía máy khách, window.location.hashđược phân tích cú pháp bởi bộ định tuyến React. Bộ định tuyến React kết xuất một thành phần mà nó đã được cấu hình để hiển thị cho / react / route , tương tự như vậy BrowserRouter.

Quan trọng nhất, HashRoutercác trường hợp sử dụng không giới hạn ở SPA. Một trang web có thể có định tuyến phía máy chủ kế thừa hoặc thân thiện với công cụ tìm kiếm, trong khi ứng dụng React có thể là một tiện ích duy trì trạng thái của nó trong URL như example.com/server/side/route#/react/route . Một số trang có chứa ứng dụng React được phục vụ ở phía máy chủ cho / server / side / route , sau đó ở phía máy khách, bộ định tuyến React hiển thị một thành phần mà nó đã được cấu hình để hiển thị cho / react / route , tương tự như kịch bản trước đó.

BÊN MÁY CHỦ: HashRouter sử dụng ký hiệu băm trong URL, có tác dụng làm cho tất cả nội dung đường dẫn URL tiếp theo bị bỏ qua trong yêu cầu máy chủ (nghĩa là bạn gửi "www.mywebsite.com/#/woman/john" máy chủ nhận được "www .mywebsite.com ". Kết quả là máy chủ sẽ trả về phản hồi URL trước # và sau đó đường dẫn bài đăng # sẽ được ứng dụng phản ứng phía máy khách của bạn phân tích cú pháp.

CLIENT SIDE: BrowserRouter sẽ không nối ký hiệu # vào URL của bạn, tuy nhiên, sẽ tạo ra sự cố khi bạn cố gắng liên kết đến một trang hoặc tải lại một trang. Nếu tuyến đường rõ ràng tồn tại trong ứng dụng phản ứng khách hàng của bạn, nhưng không có trên máy chủ của bạn, việc tải lại và liên kết (bất kỳ thứ gì truy cập trực tiếp vào máy chủ) sẽ trả về lỗi 404 not found.

Cả hai BrowserRoutervà HashRoutercác thành phần đã được giới thiệu trong React Router ver.4 dưới dạng các lớp con của Routerlớp. Đơn giản, BrowserRouterđồng bộ hóa giao diện người dùng với URL hiện tại trong trình duyệt của bạn, Điều này được thực hiện bởi API Lịch sử HTML-5. Mặt khác, HashRoutersử dụng phần Hash của URL của bạn để đồng bộ hóa.

"Trường hợp sử dụng"

HashRouter: Khi chúng tôi có các ứng dụng phía máy khách nhỏ không cần phần phụ trợ, chúng tôi có thể sử dụng HashRoutervì khi chúng tôi sử dụng hàm băm trong trình duyệt URL / thanh vị trí không thực hiện yêu cầu máy chủ.

BrowserRouter: Khi chúng tôi có các ứng dụng lớn sẵn sàng cho sản xuất phục vụ chương trình phụ trợ, chúng tôi nên sử dụng <BrowserRouter>.

Tham khảo theo sách: Học React: Phát triển web chức năng với React và Redux của Alex Banks, Eve Porcello

Việc làm mới trang khiến trình duyệt gửi yêu cầu GET tới máy chủ bằng cách sử dụng tuyến hiện tại. # Đã được sử dụng để ngăn chúng tôi gửi yêu cầu GET đó. Chúng tôi sử dụng BrowserRouter vì chúng tôi muốn yêu cầu GET được gửi đến máy chủ. Để hiển thị bộ định tuyến trên máy chủ, chúng ta cần một vị trí - chúng ta cần đường dẫn. Tuyến đường này sẽ được sử dụng trên máy chủ để thông báo cho bộ định tuyến những gì sẽ hiển thị. BrowserRouter được sử dụng khi bạn muốn hiển thị các tuyến một cách đẳng hình.

Một trường hợp sử dụng nữa mà tôi muốn thêm. Trong khi sử dụng BrowserRouter hoặc Bộ định tuyến, nó sẽ hoạt động tốt trên máy chủ nút của chúng tôi. Bởi vì nó hiểu được định tuyến máy khách (Đã cấu hình sẵn).

Nhưng trong khi chúng tôi triển khai ứng dụng React xây dựng của mình trên máy chủ Apache (chỉ cần nói PHP, trên GoDaddy), thì quá trình định tuyến sẽ không hoạt động như mong đợi. Nó sẽ chuyển sang 404, do đó chúng ta cần phải cấu hình tệp .htaccess . Sau đó cũng cho tôi mỗi nhấp chuột / url, yêu cầu gửi của nó đến máy chủ.

Trong trường hợp đó tốt hơn chúng ta nên sử dụng HASH Routing (#). # chúng tôi sử dụng điều này trên trang html của chúng tôi, để duyệt nội dung HTML và nó sẽ không dẫn đến yêu cầu máy chủ.

Trong trường hợp trên, chúng ta có thể sử dụng HashRouting, đó là tất cả các url có sau #, chúng ta có thể đặt các quy tắc định tuyến của mình để hoạt động như SPA.

Về cơ bản nếu sử dụng BrowserRouter, người ta có thể sử dụng url như "soAndSoReactPage /: id"

ví dụ:

with a Route <Route path="soAndSoReactPage/:id"><soAndSoReactComponent/></Route>

bây giờ, trong thành phần phản ứng "soAndSoReactComponent", "id" sau đó có thể được trích xuất bằng useParams và do đó bạn có thể hiển thị trang "soAndSoReactComponent" theo id

một điều như vậy không thể được thực hiện với HashedRouter,