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
พร้อมกับเนื้อหาดังต่อไปนี้:
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
สร้างโปรเจกต์ด้วย React Router
อัปโหลดขึ้น hosting ตรวจสอบว่า โดยค่าเริ่มต้น routing ไม่ทำงาน
แก้ไขปัญหาด้วยไฟล์
.htaccess
