Vấn đề chính liên quan đến chuyển hướng React Router 404 là nó có thể khó thực hiện. Vì Bộ định tuyến React không có trang 404 tích hợp, nên các nhà phát triển phải tạo tuyến đường cho trang 404 theo cách thủ công, sau đó định cấu hình bộ định tuyến để chuyển hướng bất kỳ yêu cầu nào không khớp với tuyến đường hiện có. Điều này yêu cầu mã và cấu hình bổ sung, có thể tốn thời gian và khó gỡ lỗi nếu xảy ra sự cố. Ngoài ra, nếu người dùng điều hướng trực tiếp đến một URL không tồn tại, họ sẽ vẫn thấy trang lỗi thay vì được chuyển hướng đến trang 404.
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
const App = () => (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
{/* 404 Redirect */}
<Route render={() => (<Redirect to="/" />)} />
</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ề JSX.
// Dòng 5-7: Các dòng này bọc thành phần Ứng dụng trong thành phần Bộ định tuyến từ react-router-dom.
// Dòng 8-10: Các dòng này xác định hai route tương ứng cho các thành phần Home và About.
// Dòng 12: Dòng này xác định một tuyến chuyển hướng đến Trang chủ nếu không có tuyến nào khác phù hợp.
Mã lỗi 404 là gì
Mã lỗi 404 trong React Router là mã trạng thái HTTP cho biết không thể tìm thấy tài nguyên được yêu cầu. Nó thường được trả về 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 đã bị xóa hoặc di chuyển mà không cập nhật liên kết đến trang đó. Khi điều này xảy ra, React Router sẽ hiển thị một trang 404 chung với một thông báo thích hợp thông báo cho người dùng về lỗi của họ.
404 Redirect
Trong React Router, chuyển hướng 404 là một cách để chuyển hướng người dùng đến một trang khác khi họ cố truy cập một URL không hợp lệ. Điều này có thể hữu ích để cung cấp cho người dùng trải nghiệm tốt hơn khi họ nhập URL không chính xác hoặc cố gắng truy cập một trang không tồn tại. Chuyển hướng 404 có thể được triển khai bằng cách sử dụng thành phần Chuyển hướng từ Bộ định tuyến React, cho phép bạn chỉ định tên đường dẫn của trang mà bạn muốn chuyển hướng người dùng đến. Ví dụ: nếu ai đó cố truy cập /invalid-url, bạn có thể sử dụng thành phần Chuyển hướng như sau:
