Khắc phục lỗi React router khi deploy trên Vercel

1. Vấn đề

Sau khi triển khai deploy của tôi lên Vercel, tôi gặp một lỗi với các sub-routes.

Các đường dẫn này vẫn hoạt động bình thường khi chạy trên localhost. Nhưng khi tôi cố gắng truy cập trực tiếp vào một sub-routes trên khi đã deploy trên Vercel (ví dụ: page/gioi-thieu), nó hiển thị lỗi 404.

2. Khắc phục

Để giải quyết vấn đề truy cập sub-routes này, chúng ta sẽ tạo một tệp cấu hình có tên là vercel.json với nội dung sau:

{
  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
}

Sau đó lưu và deploy lại là xong.