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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
B - MDUpgrade อัพเกรด Joomla 2.5.28 เป็น 3.8 แล้วมีการอัพโหลดอยู่นานมาก
โดย Parichat ส 21 ก.ค. 2018 7:10 pm บอร์ด Joomla Dev
0
1
ส 21 ก.ค. 2018 7:10 pm โดย Parichat
นักฟุตบอลเสียภาษีอย่างไรบ้าง?
โดย taemmynatchapon ส 21 ก.ค. 2018 6:19 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
9
ส 21 ก.ค. 2018 6:19 pm โดย taemmynatchapon
google dive โหลดไฟล์ PDF ไม่ได้ เด้งไปไหนไม่รู้ หน้าขาวๆ
โดย thatsawan ส 21 ก.ค. 2018 1:45 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
8
ส 21 ก.ค. 2018 1:45 pm โดย thatsawan
'งานประจำวันที่ 21 กรกฎาคม 2561
โดย tatiya ส 21 ก.ค. 2018 10:09 am บอร์ด M065 - ตติยะ นาชัย
1
3
ส 21 ก.ค. 2018 7:13 pm โดย tatiya
ช่วยแนะนำ mysqli หน่อยครับ จะเปลี่ยนยังไงครับ
โดย mollyclick ส 21 ก.ค. 2018 7:34 am บอร์ด Programming - PHP
0
24
ส 21 ก.ค. 2018 7:34 am โดย mollyclick
สอบถามเรื่องการแสดงค่าหน่อย
โดย zinptin ศ 20 ก.ค. 2018 9:06 pm บอร์ด Programming - PHP
0
14
ศ 20 ก.ค. 2018 9:06 pm โดย zinptin
Demo M2OpenERP
โดย tsukasaz ศ 20 ก.ค. 2018 4:02 pm บอร์ด M2OpenERP
0
5
ศ 20 ก.ค. 2018 4:02 pm โดย tsukasaz
Q - ไม่สามารถอัพไฟล์ขึ้น git lab ได้
โดย prakon ศ 20 ก.ค. 2018 1:44 pm บอร์ด Programming - PHP
1
24
ศ 20 ก.ค. 2018 2:12 pm โดย tsukasaz
สอบถามการเขียน batch file หน่อยครับ
โดย jlo ศ 20 ก.ค. 2018 11:38 am บอร์ด Programming - PHP
0
23
ศ 20 ก.ค. 2018 11:38 am โดย jlo
งานประจำวันที่ 20 กรกฏาคม 2561
โดย pprn ศ 20 ก.ค. 2018 10:13 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
1
18
ศ 20 ก.ค. 2018 5:19 pm โดย pprn
งานประจำวันที่ 20 กรกฎาคม 2561
โดย tatiya ศ 20 ก.ค. 2018 9:29 am บอร์ด M065 - ตติยะ นาชัย
1
5
ศ 20 ก.ค. 2018 7:38 pm โดย tatiya
งานปรจำวันที่ 20 กรกฏาคม 2561
โดย prakon ศ 20 ก.ค. 2018 9:13 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
1
11
ศ 20 ก.ค. 2018 5:10 pm โดย prakon
Q - ไม่สามารถลิงค์ข้อความในเว็บ ของ Joomla ได้
โดย prakon พฤ 19 ก.ค. 2018 12:27 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
2
40
พฤ 19 ก.ค. 2018 1:08 pm โดย AePongsak
ทำการกด edit ภาพแล้ว ทำยังไงให้ไปทับภาพเดิมหรือลบภาพเดิมครับ
โดย mollyclick พฤ 19 ก.ค. 2018 11:04 am บอร์ด Programming - PHP
6
76
พฤ 19 ก.ค. 2018 6:03 pm โดย mollyclick
งานประจำวันที่ 19 กรกฏาคม 2561
โดย pprn พฤ 19 ก.ค. 2018 10:45 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
1
22
พฤ 19 ก.ค. 2018 5:52 pm โดย pprn
งานประจำวันที่ 19 กรกฎาคม 2561
โดย tatiya พฤ 19 ก.ค. 2018 9:57 am บอร์ด M065 - ตติยะ นาชัย
1
6
พฤ 19 ก.ค. 2018 7:32 pm โดย tatiya
มี Error mysqli_query() expects at least 2 parameters, 1 given แก้ตรงไหนครับ
โดย mollyclick พฤ 19 ก.ค. 2018 9:50 am บอร์ด Programming - PHP
2
53
พฤ 19 ก.ค. 2018 10:02 am โดย mollyclick
งานประจำวันที่ 19 กรกฎาคม 2561
โดย prakon พฤ 19 ก.ค. 2018 9:55 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
1
11
พฤ 19 ก.ค. 2018 11:06 am โดย prakon
หาวิธีลงวินโดโดยใช้ USB
โดย Anonymous พ 18 ก.ค. 2018 10:16 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
56
พ 18 ก.ค. 2018 11:07 pm โดย mindphp
สอบถามการเขียน Extension BBCode ที่จะ Query ข้อมูลจาก SQL ครับ
โดย AePongsak พ 18 ก.ค. 2018 6:35 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
2
53
ส 21 ก.ค. 2018 1:20 pm โดย AePongsak