ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

การติดตั้ง React Router

     React Router คือ module ที่ทำหน้าที่ในการ Navigating หรือการเปลี่ยน page ไปมา ภายในระบบของ React และได้แบ่งออกเป็น 3 แพคเกจ ได้แก่ react-router, react-router-dom และ react-router-native แต่ในที่นี้เราจะกล่าวถึง react-router-dom เพราะ ตัวนี้จะเรียกใช้งานบน Browser

     เราแทบไม่ต้องติดตั้ง react-router โดยตรง แพคเกจดังกล่าวมี Component และฟังก์ชั่นสำหรับการใช้งาน React Router

     ติดตั้งโดยใช้ nmp :

$ npm install --save react-router-dom

     จากนั้นให้ใช้คำสั้งข้างล่างนี้ เพื่อเป็นการ Start :

$ npm run start

     การรวม Module ก็จะเหมือนกับ Webpack เราสามารถเรียกใช้งานได้ตามที่เราต้องการ โค้ดก็จะมีหน้าตาประมานนี้ :

// using ES6 modules
import { BrowserRouter, Route, Link } from 'react-router-dom'

 

React Router

     เมื่อเราเริ่มโปรเจคใหม่ เราต้องกำหนดว่า Router ชนิดใด เหมาะสมที่จะใช้ในงานที่ใช้เบราว์เซอร์มีส่วนประกอบ <BrowserRouter> และ <HashRouter> <BrowserRouter> ควรใช้เมื่อเรามีเซิร์ฟเวอร์ที่จะจัดการคำขอแบบไดนามิก ในขณะที่ <HashRouter> ควรใช้สำหรับเว็บไซต์แบบคงที่

     โดยปกติแล้วเราควรใช้ <BrowserRouter> แต่ถ้าเว็บไซต์เป็นโฮสต์บนเซิร์ฟเวอร์ที่ทำหน้าที่เฉพาะไฟล์แบบคงที่  Elements <HashRouter> จะเป็นทางออกที่ดี

 

การแสดงผล <Router>

     Router Component คาดหวังว่าจะได้รับ Element ลูกเพียงอย่างเดียว ในการทำงานภายใต้ข้อจำกัด ( การแยก App จาก router เป็นการแสดงผลเซิร์ฟเวอร์ เพราะว่าเราสามารถใช้ <App> บนเซิร์ฟเวอร์ในขณะที่ เปลี่ยนเป็น <MemoryRouter> )

     Example :

import { BrowserRouter } from 'react-router-dom'

ReactDOM.render((
  <BrowserRouter>
    <App />
  </BrowserRouter>
), document.getElementById('root'))

     ตอนนี้เราได้เลือก router ของเราแล้ว เราสามารถเริ่มต้นใช้งานแอพพลิเคชันของเราได้ จากตัวอย่างโค้ดด้านบน ใน Element <App /> ภายในโค้ดจะมี Component และใน Component จะมี Element ดังโค้ดต่อไปนี้ :

const App = () => (
  <div>
    <Header />
    <Main />
  </div>
)

      นี่คือ Component App ที่เราตั้งไว้เป็น route บนสุด App เป็น Component ของ route ที่ครอบ route อื่นอีกที มันจึงโดนเอาไปแสดงผลในทุกๆครั้งที่เราเข้าเพจในฐานะเป็น layout ของเพจ และเมื่อเราเข้า route อื่นๆ Component ที่เป็นตัวแทนของ route นั้นจะโดนดูดเข้ามาเป็นลูกของ App อีกทีนึง โดยเราสามารถเข้าถึงมันได้จาก this.props.children ตัวอย่างเช่น ถ้าเพื่อนๆเข้าถึง /pages แล้ว Component Pages จะเป็นลูกของ App และเรียกใช้งานได้ด้วย this.props.children การแสดงผลเมื่อเข้าแต่ละ path เป็นดังนี้

children

children

    

 

ข้อมูลอ้างอิง : https://medium.com

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ศึกษาการใช้งาน Joomla
โดย numtan5839 จ 18 พ.ย. 2019 7:16 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
0
1
จ 18 พ.ย. 2019 7:16 pm โดย numtan5839
ผลพยากรณ์อากาศ เปลี่ยนภาษาตามการตั้งค่าของผู้ดูแลระบบ
โดย bankjittapol จ 18 พ.ย. 2019 7:11 pm บอร์ด Joomla Developing Knowledge
0
3
จ 18 พ.ย. 2019 7:11 pm โดย bankjittapol
สร้าง list box ใน joomla ที่สามารถเลือก มากกว่า 1 ค่า
โดย bankjittapol จ 18 พ.ย. 2019 6:14 pm บอร์ด Joomla Developing Knowledge
0
5
จ 18 พ.ย. 2019 6:14 pm โดย bankjittapol
จะดึงชื่อจังหวัดมาแสดงใน list ได้ยังไงครับ
โดย bankjittapol จ 18 พ.ย. 2019 5:45 pm บอร์ด Joomla Development
1
10
จ 18 พ.ย. 2019 5:52 pm โดย tsukasaz
ต้องการให้ ใน list แสดงชื่อจังหวัด เพื่อใช้เลือกแสดงครับ
โดย bankjittapol จ 18 พ.ย. 2019 12:03 pm บอร์ด Joomla Development
2
29
จ 18 พ.ย. 2019 4:02 pm โดย bankjittapol
Work's on Hand ตรีเนตร บูรณโพธิ์ทอง M097
โดย numtan5839 จ 04 พ.ย. 2019 11:09 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
2
23
จ 18 พ.ย. 2019 3:27 pm โดย numtan5839
ดู Logs ไฟล์ บน Windows Server แบบ Real Time ตัวอย่าง Apache Logs
โดย mindphp จ 18 พ.ย. 2019 1:45 pm บอร์ด Microsoft Office Knowledge & line & Etc
1
8
จ 18 พ.ย. 2019 1:47 pm โดย mindphp
หา theme language file ไม่เจอ
โดย bankjittapol ส 16 พ.ย. 2019 5:33 pm บอร์ด Joomla Development
2
35
ส 16 พ.ย. 2019 5:50 pm โดย bankjittapol
ต้องการสร้าง แท็ก เพื่อเลือกจังหวัด ที่จะแสดง ต้องทำไงครับ
โดย bankjittapol จ 18 พ.ย. 2019 10:53 am บอร์ด Joomla Development
2
17
จ 18 พ.ย. 2019 11:47 am โดย bankjittapol
เริ่มลงทุนในอสังหาฯ คุณเองก็ทำได้
โดย Patty Perfume อ 17 พ.ย. 2019 6:08 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
24
จ 18 พ.ย. 2019 10:29 am โดย Losa
บันทึกตัวแปรเป็นชื่อไฟล์ลง database ไม่ได้
โดย teenproza7 อ 28 พฤษภาคม 2019 4:52 pm บอร์ด Programming - C/C++ & java & Python
0
218
อ 28 พฤษภาคม 2019 4:52 pm โดย teenproza7
งานประจำวันที่ 18 พฤศจิกายน 2562
โดย numtan5839 จ 18 พ.ย. 2019 10:14 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
1
11
จ 18 พ.ย. 2019 7:16 pm โดย numtan5839
Skype for Business และ Microsoft Teams
โดย Atomseed Suckseed จ 18 พ.ย. 2019 10:11 am บอร์ด MindPHP News / Feedback
0
5
จ 18 พ.ย. 2019 10:11 am โดย Atomseed Suckseed
งานประจำวันที่ 16 พฤศจิกายน 2562
โดย numtan5839 ส 16 พ.ย. 2019 10:28 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
4
23
ส 16 พ.ย. 2019 7:02 pm โดย numtan5839
การใช้งาน Ultrasonic Sensor เซ็นเซอร์ที่ใช้สำหรับตรวจจับระยะห่างของวัดถุ
โดย bankjittapol ส 16 พ.ย. 2019 4:42 pm บอร์ด IOT - Internet of things
0
15
ส 16 พ.ย. 2019 4:42 pm โดย bankjittapol
อยากทราบการแสดงวันที่ในรูปแบบของ joomla
โดย bankjittapol ส 16 พ.ย. 2019 11:14 am บอร์ด Joomla Development
5
47
ส 16 พ.ย. 2019 4:56 pm โดย mindphp
Ultrasonic Sensor คืออะไร
โดย bankjittapol ส 16 พ.ย. 2019 3:40 pm บอร์ด IOT - Internet of things
0
23
ส 16 พ.ย. 2019 3:40 pm โดย bankjittapol
Database Normalization
โดย bankjittapol ศ 15 พ.ย. 2019 6:31 pm บอร์ด PHP Knowledge
1
38
ส 16 พ.ย. 2019 5:02 pm โดย Losa
วิธีการนำค่าจาก attribute ที่อยู่ใน element หนึ่ง ไปใส่ให้กับ attribute ที่อยู่ในอีก element หนึ่ง
โดย Ittichai_chupol ศ 15 พ.ย. 2019 6:29 pm บอร์ด Jquery & Ajax Knowledge
0
15
ศ 15 พ.ย. 2019 6:29 pm โดย Ittichai_chupol
VDO - Program Check Tracking Thailand Post
โดย numtan5839 อ 12 พ.ย. 2019 2:12 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
4
26
ศ 15 พ.ย. 2019 6:24 pm โดย numtan5839