Cách khắc phục lỗi React Router 404 khi tải lại trang hoặc truy cập URL trực tiếp

Why React Router Breaks on Page Reload (and How to Fix It)

Vấn đề:

Trong một ứng dụng React sử dụng React Router (ví dụ: với BrowserRouter), ứng dụng hoạt động hoàn hảo khi bạn nhấp vào các liên kết. Nhưng khi bạn làm mới trang hoặc truy cập trực tiếp vào một URL như /joblist, máy chủ của bạn trả về lỗi 404 Not Found.

Nguyên nhân:

React Router là một giải pháp định tuyến phía client. Trình duyệt gửi yêu cầu đến máy chủ cho /joblist, nhưng máy chủ không nhận ra đường dẫn đó. Nó không biết rằng nó được cho phép phục vụ ứng dụng React của bạn và để React Router xử lý nó.

Giải pháp: Chuyển hướng tất cả các tuyến đến index.html

Bạn cần cấu hình máy chủ web (Apache, Nginx, Express, v.v.) của mình để phục vụ index.html cho tất cả các đường dẫn không xác định. Bằng cách này, React Router sẽ tiếp quản định tuyến sau khi ứng dụng tải.

Ví dụ (Nginx):

location / {

  try_files $uri /index.html;

}

Ví dụ (Express.js):

app.use((req, res, next) => {

  res.sendFile(path.join(__dirname, 'build', 'index.html'));

});

Ưu điểm và nhược điểm của giải pháp này

Ưu điểm

Khắc phục hoàn toàn sự cố 404 khi làm mới hoặc truy cập URL trực tiếp.
Hoạt động liền mạch với BrowserRouter của React Router, cho phép URL rõ ràng mà không cần #.
Cải thiện SEO và khả năng chia sẻ URL (so với định tuyến dựa trên hash).
Cài đặt đơn giản cho hầu hết các máy chủ tĩnh như Netlify, Vercel hoặc Firebase Hosting (chúng có các quy tắc ghi đè tích hợp).

Nhược điểm

Yêu cầu cấu hình máy chủ, có thể không khả dụng trong một số môi trường lưu trữ chia sẻ.
Không thể sử dụng trực tiếp với các tuyến truyền thống phía máy chủ, trừ khi được xử lý cẩn thận (ví dụ: các tuyến API phải được loại trừ).
Có thể hiển thị tất cả các đường dẫn cho React, điều này có thể không mong muốn nếu bạn có các tuyến chỉ dành cho máy chủ an toàn hoặc bị hạn chế.
Không phù hợp với lưu trữ chỉ dành cho tệp tĩnh (ví dụ: S3 cơ bản) trừ khi các quy tắc ghi đè được kích hoạt.

Suy nghĩ cuối cùng

Nếu bạn đang sử dụng BrowserRouter trong sản xuất, cấu hình máy chủ của bạn cho định tuyến SPA (Ứng dụng trang đơn) là cần thiết. Bản sửa lỗi này là tiêu chuẩn của ngành nhưng nó đòi hỏi sự hiểu biết về cách máy chủ của bạn xử lý định tuyến.

Nếu bạn đang sử dụng Netlify, Vercel hoặc Firebase, hãy cho tôi biết - chúng ta có thể cung cấp cho bạn các quy tắc ghi đè chính xác. Bạn có muốn điều đó không?