React Router di Hosting PHP

Seperti yang sudah Anda ketahui, setelah proses build, proyek React merupakan kumpulan aset statis biasa yang dapat diunggah ke hosting mana pun, dan akan langsung bekerja di sana.

Namun, ada masalah dengan React Router. Masalahnya adalah, Router saat bekerja mengubah URL halaman di browser. Saat itu, halaman tidak benar-benar dimuat ulang, namun hanya URL-nya yang diubah melalui JavaScript.

Di situs yang diunggah ke hosting, Router akan bekerja. Namun, jika Anda berada di suatu halaman situs, selain halaman utama, lalu memuat ulang halamannya, maka akan muncul error 404.

Dan ini logis, karena browser akan mencari file sesuai URL yang diminta, seperti cara kerja situs statis biasanya. Sedangkan di aplikasi kita, halaman tersebut tidak akan ada, karena kita hanya mensimulasikannya, dan sebenarnya seluruh aplikasi kita berjalan pada index.html.

Untuk menyelesaikan masalah ini, perlu dilakukan pengaturan sehingga semua URL yang tidak mengarah ke file yang benar-benar ada, dialihkan ke index.html. Hal ini dilakukan dengan menggunakan fitur web-server yang berjalan pada hosting.

Hosting virtual biasanya berjalan dengan PHP. Biasanya server yang digunakan adalah Apache. Di dalamnya tersedia file khusus .htaccess, yang dapat digunakan untuk mengatur pengalihan.

Untuk ini, Anda di root situs Anda perlu menempatkan file .htaccess dengan konten berikut:

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

Buatlah proyek dengan React Router.

Unggah ke hosting. Pastikan bahwa secara default routing tidak bekerja.

Perbaiki masalah tersebut dengan file .htaccess.