Cách tạo trang 404 trong React bằng React Router

Tạo trang 404 tùy chỉnh bằng một route React đơn giản, giúp khách truy cập web, ứng dụng của bạn khi họ cần nó nhất.

Sớm hay muộn, bất kỳ ai cũng có thể sẽ ghé thăm một URL không tồn tại trên web của bạn. Những gì người dùng làm 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. Tuy nhiên, thay vào đó, bạn có thể cung cấp trang 404 hữu ích để giúp họ tiếp tục điều hướng đến trang web của bạn.

Với web React, bạn có thể dùng routerReact để tạo một trang 404 not found hữu ích. Nó hiện khi người dùng ghé thăm một trang không tồn tại trên web của bạn.

Tạo trang 404

Lỗi 404 xảy ra khi bạn cố gắng ghé thăm một trang trên web mà máy chủ không thể tìm thấy. Là lập trình viên, xử lý lỗi 404 có nghĩa bạn tạo một trang được máy chủ sử dụng làm lựa chọn thay thế khi nó không thể tìm thấy trang được yêu cầu.

Bài viết này giả sử bạn đã có một ứng dụng React đang hoạt động với định tuyến được thiết lập. Nếu không, tạo ứng dụng React và cài đặt React Router.

Tạo file mới tên NotFound.js và thêm code 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 hiện thông báo và điều hướng người dùng tới các trang thông dụng trên web.

Định tuyến tới trang 404

Bạn chỉ định các tuyến dùng router React bằng cách xác định đường dẫn URL và thành phần muốn hiện cho route đó.

Ví dụ, bên dưới là một route hiện thành phần Home.

import { Route, Routes } from "react-router-dom";

function App() {
    return (
        <Routes>
            <Route path="/" element={ <Home/> }/>
        </Routes>
    )
}

Trang lỗi 404 hiện đường dẫn không tồn tại trên web. Do đó, thay vì xác định đường dẫn này, dùng dấu hoa thị (*) để khớp mọi thứ.

<Route path='*' element={<NotFound />}/>

Thành phần NotFound sẽ hiện cho tất cả URL không được xác định trong các route.

Định tuyến trong React

Các trình duyệt mặc định đã có trang 404 nhưng việc tạo một trang tùy biến, cho phép nó cho người dùng biết sự cố gì đã xảy và cách sửa nó. Bạn có thể dễ dàng tạo một trang React 404 cho tất cả URL không tồn tại trong app web bằng một react-router-dom. Bạn cũng có thể tạo kiểu nó phù hợp với thương hiệu cá nhân.