Relative path in react

13 May 2018

Share to:

สวัสดีครับ สําหรับบทความนี้ผมจะยกตัวอย่างการทํา 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": {
    ...
  }
}

Suggestion blogs

Go EP.2 ทําความรู้จักกับ Go module

สวัสดีครับ ในบทความนี้ก็เป็น EP.2 แล้วนะครับ โดยเนื้อหาจะเป็นเรื่องเกี่ยวกับ Go module ว่าคืออะไร ใช้ทําอะไร และมีประโยชน์อย่างไรสําหรับท่านใดที่ยังไม่ได้อ่าน EP.1 ท่านสามารถกลับไปอ่านก่อนได้นะครับที่นี่ Go EP.1 เริ่มต้นเรียนรู้ภาษา Go

LED แอลอีดี คืออะไร

ความเป็นมาของ LEDLED ได้ถูกนํามาใช้ในแผงวงจรครั้งแรกเมื่อปี 1962 ซึ่งในตอนนั้น LED จะให้ความเข้มของแสงไม่มากนัก และมีเฉพาะ ความถี่ในช่วงแสง infrared ไม่สามารถมองเห็นด้วยตาเปล่า มักจะใช้กับอุปกรณ์ประเภทรีโมทคอนโทรลต่างๆ ต่อมา LED ถูกพัฒนาขึ้นมาเรื่อยๆจนสามารถเปล่งแสงได้ครอบคุมตั้งแต่ย่าน infrared แสงที่มองห็นไปจนถึงย่าน ultra violet หรือ UV ในปัจจุบัน LED ถูกพัฒนาจนมีความเข้มของแสงสูงมาก และสามารถให้แสงสีขาวได้ จนสามารถนํามาใช้แทนหลอดไฟส่องสว่างที่มีใช้อยู่ในปัจจุบัน

ปัญหา Login Secure Shell ช้า

เคยไหมเวลา login เข้า Secure Shell แล้ว ช้า สาเหตุเกิดจาก ค่า config default ของ sshd เมื่อมีการ login เข้ามาระบบจะพยายามแปลง ip address เป็นชื่อ host name โดยไปถามจาก DNS Server (reverse hostname lookup) ถ้าเครื่อง ไม่สามารถติดต่อ DNS Server ได้ จะทําให้ ตอน login จะค้างไปซักพัก


Copyright © 2024 thiti.dev |  v1.16.0 |  Privacy policy |  status | 

            วงแหวนเว็บ