Relative path in react

สวัสดีครับ สําหรับบทความนี้ผมจะยกตัวอย่างการทํา Relative path ใน React ครับ เนื่องจากเมื่อไม่นานมานี้ผมเจอเหตุการคือเว็บที่เราเขียนด้วย React ไม่ได้อยู่ใน Root path เช่น เว็บไซต์เราไปอยู่ใน path "/profile/" ไม่ได้อยู่ใน "/"

ตัวอย่าง  "https://www.mydomain.com/profile/"

จะทําให้เกิดปัญหาการ import พวก image, css, ฯลฯ React จะอ้างไปที่ "/" ซึ่งจริงๆแล้วมันควรจะเป็น "/profile/" วิธีการแก้ปัญหานี้คือ

เราจะต้องแก้ไขไฟล์สองส่วนด้วยกันครับ

ส่วนที่ 1

เป็นส่วนของไฟล์ Index ที่ import พวก javascript หรือ css ภายนอกที่ไม่ยุ่งเกี่ยวกับ React

วิธีการคือ เพิ่ม <base href="/your_root_path/"> ในไฟล์ "/public/index.html"

แก้ your_root_path เป็น path ที่เราต้องการ เพื่อบอกว่า root path ที่เราจะใช้ใน html ไฟล์นี้คืออะไร ซึ่งถ้าเราไม่ได้ใส่ Default จะเป็น "/"

ตัวอย่าง

ส่วนที่ 2

ส่วนนี้จะเป็นส่วนที่ยุ่งเกี่ยวกับการทํางานของตัว React เอง วิธีการคือ แก้ไฟล์ package.json โดยเพิ่ม field "homepage" เข้าไปตามนี้

เมื่อเราสั่ง build project ของเรา Script ของ Create react app จะอ่านค่านี้ไป แล้วไปเปลี่ยน root path ในทุกๆการ Import เป็นค่าที่ระบุให้เราเองโดยอัตโนมัติ ซึ่งจะมีผลกับการ Import image, css, ฯลฯ ใน component ต่างๆของเรา

ตัวอย่างการแก้ไฟล์ package.json

Comments