Một vấn đề phổ biến là việc làm mới trang hoặc điều hướng trực tiếp đến một URL trong ứng dụng có thể dẫn đến lỗi 404. Điều này là do Vercel không biết cách xử lý định tuyến phía máy khách theo mặc định và máy chủ trả về lỗi 404 thay vì phân phát tệp index.html mà React Router cần để xử lý yêu cầu.
Để khắc phục sự cố này, bạn có thể thiết lập quy tắc viết lại trong vercel.jsontệp để chuyển hướng tất cả các yêu cầu đến index.html. Đây là tập tin vercel.json
{
"rewrites": [
{
"source": "/(.*)",
"destination": "/index.html"
}
]
}Tệp cấu hình này vercel.json thiết lập quy tắc viết lại khớp với tất cả các yêu cầu ( /(.*)) và chuyển hướng chúng đến index.html ( /index.html).
Khi bạn sử dụng định tuyến phía máy khách trong ứng dụng một trang, tất cả việc định tuyến được xử lý ở phía máy khách thay vì phía máy chủ. Điều đó có nghĩa là khi bạn điều hướng đến một URL cụ thể trong ứng dụng của mình, máy chủ cần trả về tệp index.html để định tuyến phía máy khách có thể đảm nhận và hiển thị nội dung chính xác.
Bằng cách thiết lập quy tắc ghi lại này, mọi yêu cầu không dành cho tệp hoặc thư mục tĩnh sẽ được chuyển hướng đến tệp index.html, điều này cho phép định tuyến phía máy khách tiếp quản và xử lý yêu cầu. Điều này là cần thiết để ngăn chặn lỗi 404 khi làm mới trang hoặc điều hướng trực tiếp đến một URL trong ứng dụng.
Lưu ý rằng vercel.json dành riêng cho Vercel, đây là nền tảng đám mây để triển khai không cần máy chủ. Các môi trường máy chủ khác có thể sử dụng các tệp cấu hình khác nhau hoặc yêu cầu các cài đặt khác nhau để xử lý định tuyến phía máy khách và lỗi 404.