React Router บน PHP Hosting

ตามที่คุณทราบแล้ว หลังจาก build โปรเจกต์ React ก็จะกลายเป็น static files ธรรมดา ซึ่งสามารถ อัปโหลดไปยัง hosting ใดก็ได้ และมันจะทำงานได้ทันทีที่นั่น

อย่างไรก็ตาม มีปัญหากับ React Router ประเด็นคือ เมื่อ Router ทำงาน มันจะเปลี่ยน URL ของหน้าในเบราว์เซอร์ ขณะที่ในความเป็นจริงหน้าเว็บไม่ได้ reload แต่เปลี่ยน URL ด้วย JavaScript เท่านั้น

ในเว็บไซต์ที่อัปโหลดขึ้น hosting Router จะทำงาน แต่หากอยู่ บนหน้าใดของเว็บไซต์ ยกเว้นหน้าหลัก แล้วทำการ reload หน้าใหม่ มันจะเกิด ข้อผิดพลาด 404

และนี่เป็นเหตุผล เนื่องจากเบราว์เซอร์จะ ค้นหาไฟล์ตาม URL ที่กำหนด ตามวิธีทำงานปกติของเว็บไซต์แบบ static แต่ในแอปพลิเคชันของเราไม่มีหน้าเช่นนั้น เนื่องจากเราเพียงแค่จำลอง หน้าเหล่านั้น และในความเป็นจริงทั้งหมด แอปพลิเคชันของเราทำงานบน index.html

ในการแก้ปัญหา ต้องทำให้ URL ทั้งหมดที่ไม่ชี้ไปยังไฟล์ ที่มีอยู่จริง ถูก redirect ไปยัง index.html ซึ่งทำได้ ด้วยเว็บเซิร์ฟเวอร์ที่ทำงาน บน hosting

Shared hosting ส่วนใหญ่ทำงานบน PHP โดยทั่วไปเซิร์ฟเวอร์ที่ใช้คือ Apache ในนั้นจะมีไฟล์พิเศษชื่อ .htaccess ซึ่งสามารถใช้ตั้งค่า การ redirect ได้

สำหรับสิ่งนี้ ที่ root ของเว็บไซต์คุณ จำเป็นต้องวางไฟล์ .htaccess พร้อมกับเนื้อหาดังต่อไปนี้:

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