Vấn đề chính liên quan đến việc không tìm thấy trang tải lại Bộ định tuyến React là khi người dùng làm mới trang, trình duyệt sẽ cố gắng gửi yêu cầu tới máy chủ cho URL hiện tại. Tuy nhiên, vì Bộ định tuyến React là định tuyến phía máy khách nên không có tuyến máy chủ tương ứng cho URL và do đó, lỗi 404 Not Found được trả về. Điều này có thể đặc biệt có vấn đề nếu người dùng đang mong đợi một số nội dung nhất định xuất hiện khi làm mới.
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
const App = () => (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
{/* Page Not Found */}
<Route render={() => (<h1>Page not found</h1>)} />
</Switch>
</Router>
);
// Dòng 1: Dòng này nhập các thành phần BrowserRouter, Route và Switch từ thư viện Reac-router-dom.
// Dòng 3: Dòng này định nghĩa một hàm gọi là Ứng dụng trả về mã JSX.
// Dòng 5: Dòng này bao bọc toàn bộ mã JSX trong thành phần Bộ định tuyến từ Reac-router-dom.
// Dòng 6: Dòng này kết thúc tất cả các route trong thành phần Switch từ react-router-dom.
// Dòng 7 – 9: Các dòng này xác định hai tuyến đường cho '/' và '/about' tương ứng với các thành phần tương ứng của chúng (Trang chủ và Giới thiệu).
// Dòng 11 – 12: Các dòng này xác định tuyến đường khi không có tuyến đường nào khác phù hợp, hiển thị thẻ h1 có nội dung “Không tìm thấy trang”.
Lỗi không tìm thấy trang
Lỗi không tìm thấy trang trong React Router là lỗi xảy ra khi người dùng cố gắng truy cập một trang hoặc tuyến đường không tồn tại. Điều này có thể xảy ra nếu người dùng nhập sai URL hoặc nếu trang họ đang cố truy cập đã bị xóa hoặc di chuyển. Trong React Router, lỗi này được xử lý bằng cách sử dụng
Làm cách nào để xử lý Trang không tìm thấy trong bộ định tuyến phản ứng
Khi sử dụng Bộ định tuyến React, bạn có thể xử lý một trang không tìm thấy bằng cách tạo một tuyến tùy chỉnh sẽ hiển thị thành phần NotFound khi URL không khớp với bất kỳ tuyến hiện có nào. Để thực hiện việc này, bạn cần tạo một tuyến đường mới với đường dẫn được đặt thành “*” và hiển thị thành phần NotFound của bạn.
Ví dụ:
Điều này sẽ khớp với bất kỳ URL nào chưa được khớp với một tuyến đường hiện có và hiển thị thành phần NotFound của bạn.
Làm cách nào để buộc một trang phản ứng tải lại
Trong React Router, bạn có thể buộc tải lại một trang bằng cách sử dụng phương thức thay thế trên đối tượng lịch sử. Điều này sẽ thay thế mục hiện tại trong ngăn xếp lịch sử bằng một mục mới, do đó buộc phải tải lại trang. Để sử dụng phương pháp này, trước tiên bạn cần có quyền truy cập vào đối tượng lịch sử. Bạn có thể làm điều này bằng cách chuyển nó làm chỗ dựa khi tạo thành phần bộ định tuyến của mình:
const AppRouter = () => (
{/* Tuyến đường của bạn ở đây */}
);
Khi bạn có quyền truy cập vào đối tượng lịch sử, bạn có thể sử dụng phương thức thay thế của nó như sau:
history.replace('/ some-route');
