React Router di Hosting PHP

Seperti yang anda sudah ketahui, selepas pembinaan projek React mewakili statik biasa yang boleh dimuat naik ke mana-mana hosting, dan ia akan terus berfungsi di sana.

Walau bagaimanapun, terdapat masalah dengan React Router. Masalahnya ialah Router semasa beroperasi menukar URL halaman dalam pelayar. Pada masa yang sama, halaman itu sendiri tidak dimuat semula secara sebenar, hanya URL yang ditukar melalui cara JavaScript.

Router akan berfungsi di laman web yang dinaikkan ke hosting. Tetapi, jika berada pada mana-mana halaman laman web, kecuali halaman utama, dan memuat semula halaman tersebut, ralat 404 akan keluar.

Dan ini logik, kerana pelayar akan mencari fail pada URL yang dinyatakan, seperti bagaimana laman web statik biasanya berfungsi. Manakala dalam aplikasi kita, halaman sedemikian tidak akan wujud, kerana kita hanya mensimulasikannya, dan sebenarnya keseluruhan aplikasi kita berjalan pada index.html.

Untuk menyelesaikan masalah ini, perlu dilakukan supaya semua URL yang tidak menuju kepada fail yang benar-benar wujud, dihalakan semula kepada index.html. Ini dilakukan menggunakan cara pelayan web yang beroperasi pada hosting.

Hosting maya beroperasi pada PHP. Biasanya Apache digunakan sebagai pelayan. Fail khas .htaccess tersedia di dalamnya, yang boleh digunakan untuk menetapkan penghalaan semula.

Untuk ini, anda perlu meletakkan fail .htaccess di root laman web anda dengan kandungan berikut:

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

Buat projek dengan React Router.

Muat naiknya ke hosting. Pastikan bahawa secara lalai penghalaan (routing) tidak berfungsi.

Betulkan masalah tersebut dengan menggunakan fail .htaccess.