Tạo trang 404 tùy chỉnh bằng cách sử dụng một tuyến React đơn giản để cung cấp cho khách truy cập của bạn trải nghiệm hữu ích khi họ cần nhất.
.jpg?q=50&fit=contain&w=1500&h=750&dpr=1.5)
Không sớm thì muộn, người dùng sẽ truy cập vào một URL không tồn tại trên trang web của bạn. Người dùng làm gì sau đó là tùy thuộc vào bạn.
Họ có thể nhấn nút quay lại và rời khỏi trang web của bạn. Thay vào đó, bạn có thể cung cấp một trang 404 hữu ích để giúp họ tiếp tục điều hướng đến trang web của bạn.
Đối với các trang web React, bạn có thể sử dụng bộ định tuyến React để tạo một trang hữu ích 404 not found.
Tạo trang 404
Lỗi 404 xảy ra khi bạn cố gắng truy cập một trang trên trang web mà máy chủ không thể tìm thấy. Với tư cách là nhà phát triển, việc xử lý lỗi 404 có nghĩa là tạo một trang mà máy chủ sử dụng để thay thế khi nó không thể tìm thấy trang được yêu cầu.
Trong React, bạn thực hiện điều này bằng cách tạo một thành phần không tìm thấy sẽ hiển thị trên các tuyến không tồn tại.
Bài viết này giả định rằng bạn đã có một ứng dụng React đang hoạt động với việc thiết lập định tuyến. Nếu bạn không có, hãy tạo một ứng dụng React và sau đó cài đặt React Router.
Tạo một tệp mới có tên NotFound.js và thêm mã sau để tạo trang 404.
import { Link } from "react-router-dom";
export default function NotFound() {
return (
<div>
<h1>Oops! You seem to be lost.</h1>
<p>Here are some helpful links:</p>
<Link to='/'>Home</Link>
<Link to='/blog'>Blog</Link>
<Link to='/contact'>Contact</Link>
</div>
)
}
Trang 404 này hiển thị thông báo và liên kết để chuyển hướng người dùng đến các trang phổ biến trên trang web.
Định tuyến đến Trang 404
Bạn có thể tạo một tuyến đường bình thường bằng cách sử dụng bộ định tuyến React như sau:
import { Route, Routes } from "react-router-dom";
function App() {
return (
<Routes>
<Route path="/" element={ <Home/> }/>
</Routes>
)
}
Bạn chỉ định đường dẫn URL và phần tử bạn muốn hiển thị tại đường dẫn đó.
Trang 404 hiển thị cho các đường dẫn không tồn tại trên trang web. Vì vậy, thay vì chỉ định đường dẫn, hãy sử dụng dấu hoa thị (*).
<Route path='*' element={<NotFound />}/>
Sử dụng * hiển thị thành phần NotFound cho tất cả các URL không được chỉ định trong các tuyến.
Định tuyến trong React
Bạn có thể dễ dàng tạo trang 404 cho tất cả các URL không tồn tại trong ứng dụng web React của mình bằng bộ định tuyến.
Các trình duyệt có trang 404 mặc định nhưng việc tạo một trang tùy chỉnh cho phép bạn thông báo cho người dùng của mình biết điều gì đã xảy ra và cách họ có thể sửa chữa nó. Bạn cũng có thể tạo trang 404 phù hợp với thương hiệu của mình.
