ให้เรตสมาชิก: 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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
Features Review : Plugin Editors XTD Multicontent untuk mengeluarkan artikel dari Master Site ke Web Clien
โดย abdkode อ 19 ก.พ. 2019 6:52 pm บอร์ด Bahasa Language
0
1
อ 19 ก.พ. 2019 6:52 pm โดย abdkode
สิ่งที่อยากที่สุดของการทำงาน
โดย จันนุสรณ์ ดีแก่ อ 19 ก.พ. 2019 6:52 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
5
อ 19 ก.พ. 2019 6:52 pm โดย จันนุสรณ์ ดีแก่
Features Review : Mod MDFiles Popular modul menyenaraikan fail popular
โดย abdkode อ 19 ก.พ. 2019 5:41 pm บอร์ด Bahasa Language
0
2
อ 19 ก.พ. 2019 5:41 pm โดย abdkode
Features Review : Mod MDFiles Featured memaparkan fail-fail yang dipilih dari MDFile untuk dipaparkan pada Joomla
โดย abdkode อ 19 ก.พ. 2019 4:39 pm บอร์ด Bahasa Language
0
1
อ 19 ก.พ. 2019 4:39 pm โดย abdkode
Features Review : Components Mjform komponen untuk membuat borang laman web
โดย abdkode อ 19 ก.พ. 2019 3:23 pm บอร์ด Bahasa Language
0
6
อ 19 ก.พ. 2019 3:23 pm โดย abdkode
อบากทราบวิธีการ ส่งค่ากลับมายัง ส่วนที่เป็น sub comment ลาสุด ใน phpbb
โดย Ittichai_chupol อ 19 ก.พ. 2019 11:45 am บอร์ด Programming - PHP
0
4
อ 19 ก.พ. 2019 11:45 am โดย Ittichai_chupol
งานประจำวันที่ 19 กุมภาพันธ์ 2562
โดย Four อ 19 ก.พ. 2019 10:36 am บอร์ด M077 - อิษยา งามสอาด
2
3
อ 19 ก.พ. 2019 7:21 pm โดย Four
คู่มือวิธีการลบแบบเก็บไว้ในถังขยะใน phpbb โดยแอดมินเท่านั้นที่สามารถเห็นในส่วนนี้ User อื่นไม่สามารถทำได้
โดย จันนุสรณ์ ดีแก่ อ 19 ก.พ. 2019 9:15 am บอร์ด phpBB user Guide Knowledge
0
14
อ 19 ก.พ. 2019 9:15 am โดย จันนุสรณ์ ดีแก่
R - mdsoft_partner_fields Module ปรับเพิ่มฟิลด์ lead > partner
โดย thatsawan จ 18 ก.พ. 2019 11:18 pm บอร์ด MlineCRM Line + MD-CRM
1
3
อ 19 ก.พ. 2019 6:51 am โดย mindphp
อยากทราบวิธีการดูดข้อมูลจากเว็บอื่น
โดย newbie จ 18 ก.พ. 2019 3:05 pm บอร์ด Programming - PHP
0
20
จ 18 ก.พ. 2019 3:05 pm โดย newbie
Q - ตัว search tools ใน Joomla 4 ลอง search แล้วไม่สามารถเคลียได้
โดย Parichat ส 16 ก.พ. 2019 6:57 pm บอร์ด Joomla Dev
0
3
ส 16 ก.พ. 2019 6:57 pm โดย Parichat
อยากทราบวิธีการ ปิด ไม่ใช้ เทมเพลตกลายเป็น เว็บ responsive ใน phpbb
โดย Ittichai_chupol ส 16 ก.พ. 2019 6:56 pm บอร์ด Programming - PHP
0
19
ส 16 ก.พ. 2019 6:56 pm โดย Ittichai_chupol
อยากทราบวิธีการแก้ไข้ ปัญหา ขณะเปิดใช้งาน Extension ใน phpbb
โดย Ittichai_chupol ส 16 ก.พ. 2019 6:22 pm บอร์ด Programming - PHP
0
17
ส 16 ก.พ. 2019 6:22 pm โดย Ittichai_chupol
อยากทราบวิธีการตรวจสอบสิทธิ์ ของผู้ใช้งาน
โดย Ittichai_chupol ส 16 ก.พ. 2019 1:26 pm บอร์ด Programming - PHP
0
22
ส 16 ก.พ. 2019 1:26 pm โดย Ittichai_chupol
วิธีแก้ปัญหาบันทึกข้อมูลไม่ลงใน Joomla Version 4
โดย Parichat ส 16 ก.พ. 2019 11:49 am บอร์ด Joomla Dev
0
2
ส 16 ก.พ. 2019 11:49 am โดย Parichat
ทำความรู้จักกับ วิธีจัดการการแจ้งเตือน พร้อมวิธีการบันทึกการแจ้งเตือนว่าอ่านแล้ว ในหลายๆหัวข้อพร้อมกัน
โดย จันนุสรณ์ ดีแก่ ส 16 ก.พ. 2019 10:26 am บอร์ด phpBB user Guide Knowledge
0
27
ส 16 ก.พ. 2019 10:26 am โดย จันนุสรณ์ ดีแก่
งานประจำวันที่ 16 กุมภาพันธ์ 2562
โดย Four ส 16 ก.พ. 2019 9:47 am บอร์ด M077 - อิษยา งามสอาด
1
11
ส 16 ก.พ. 2019 7:13 pm โดย Four
Mod MDFiles Popular 모듈 소개 MDFile에서 파일을 가져와 표시
โดย wipaporn ศ 15 ก.พ. 2019 6:06 pm บอร์ด korean Language - 한국어
0
19
ศ 15 ก.พ. 2019 6:06 pm โดย wipaporn
MDFiles Featured modules를 소개하면 MDFile에서 파일을 가져와 보여준다.
โดย wipaporn ศ 15 ก.พ. 2019 6:06 pm บอร์ด korean Language - 한국어
0
20
ศ 15 ก.พ. 2019 6:06 pm โดย wipaporn
Q - เกิดerror โค้ด ขึ้นว่า AttributeError: 'TextTestResult' object has no attribute 'openwed_Login'
โดย ธวัชชัย แสนหาญ ศ 15 ก.พ. 2019 5:55 pm บอร์ด Programming - C/C++ & java & Python
0
30
ศ 15 ก.พ. 2019 5:55 pm โดย ธวัชชัย แสนหาญ