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

ตัวอย่าง “https://www.mydomain.com/profile/” จะทําให้เกิดปัญหาการ import พวก image, css, ฯลฯ React จะอ้างไปที่ ”/” ซึ่งจริงๆแล้วมันควรจะเป็น “/profile/” วิธีการแก้ปัญหานี้คือ เราจะต้องแก้ไขไฟล์สองส่วนด้วยกันครับ

ส่วนที่ 1

เป็นส่วนของไฟล์ Index ที่ import พวก javascript หรือ css ภายนอกที่ไม่ยุ่งเกี่ยวกับ React วิธีการคือ เพิ่ม ในไฟล์ “/public/index.html”

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

ตัวอย่าง

<html lang="en">
  <head>
    <base href="/your_root_path/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">

...

ส่วนที่ 2

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

"homepage": "https://www.mydomain.com/some_path/"

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

{
  "name": "myapp",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://www.mydomain.com/some_path/",
  "dependencies": {
    ...
  },
  "scripts": {
    ...
  }
}