React Router trên Hosting PHP

Như bạn đã biết, sau khi build, dự án React đại diện cho static thông thường, có thể được tải lên bất kỳ hosting nào, và nó sẽ hoạt động ngay lập tức ở đó.

Tuy nhiên, có một vấn đề với React Router. Vấn đề là, Router trong quá trình hoạt động thay đổi URL của các trang trong trình duyệt. Đồng thời, trang thực sự không được tải lại, mà chỉ URL thay đổi bằng phương tiện JavaScript.

Trong trang web, được đưa lên hosting, Router sẽ hoạt động. Nhưng, nếu đang ở trên một trang nào đó của trang web, ngoại trừ trang chủ, mà tải lại nó, thì sẽ xuất hiện lỗi 404.

Và điều này là hợp lý, bởi vì trình duyệt sẽ tìm kiếm tệp theo URL đã chỉ định, như các trang web tĩnh thường hoạt động. Còn trong ứng dụng của chúng ta, trang như vậy sẽ không có, vì chúng ta chỉ mô phỏng chúng, còn thực tế toàn bộ ứng dụng của chúng ta chạy trên index.html.

Để giải quyết vấn đề, cần làm sao để tất cả URL, không dẫn đến các tệp tồn tại thực sự, được chuyển hướng về index.html. Điều này được thực hiện bằng phương tiện của web-server, đang chạy trên hosting.

Các hosting ảo hoạt động trên PHP. Thông thường Apache được sử dụng làm server. Trong đó có sẵn tệp đặc biệt .htaccess, với sự trợ giúp của nó có thể thiết lập chuyển hướng.

Để làm điều này, trong thư mục gốc của trang web bạn cần đặt tệp .htaccess với nội dung sau:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Hãy tạo một dự án với React Router.

Đưa nó lên hosting. Hãy đảm bảo rằng, theo mặc định, routing không hoạt động.

Sửa lỗi với sự trợ giúp của tệp .htaccess.