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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ตัวแปรชนิด Tuple
โดย Four พฤ 18 ม.ค. 2018 5:18 pm บอร์ด Python Knowledge
0
10
พฤ 18 ม.ค. 2018 5:18 pm โดย Four
Smart Slider 3(สมาร์ทสไลด์ 3)-Extension สำหรับสร้างแถบเลื่อนและบล็อคภาพเคลื่อนไหวที่สวยงาม
โดย Parichat พฤ 18 ม.ค. 2018 5:02 pm บอร์ด Joomla Extension Review
0
6
พฤ 18 ม.ค. 2018 5:02 pm โดย Parichat
ขอสอบถามเรื่องความแตกต่างของฟังก์ชั่นvariant_pow()กับฟังก์ชั่น pow()
โดย Parichat พฤ 18 ม.ค. 2018 1:58 pm บอร์ด Programming - PHP
0
11
พฤ 18 ม.ค. 2018 1:58 pm โดย Parichat
อยากได้โปรแกรม command แบบ cmd ที่เก็บ history ได้ค่ะช่วยเเนะนำหน่อย
โดย thatsawan พฤ 18 ม.ค. 2018 11:18 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
25
พฤ 18 ม.ค. 2018 7:18 pm โดย thatsawan
0vsNULL
โดย Before Dong พฤ 18 ม.ค. 2018 10:32 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
19
พฤ 18 ม.ค. 2018 2:51 pm โดย Before Dong
งานประจำวันที่ 18 มกราคม 2561
โดย Parichat พฤ 18 ม.ค. 2018 9:38 am บอร์ด MT21 - ปาริชาติ รัตโณภาส
1
13
พฤ 18 ม.ค. 2018 7:16 pm โดย Parichat
งานประจำวันที่ 18 มกราคม 2561
โดย Jom07 พฤ 18 ม.ค. 2018 9:27 am บอร์ด MT23 - สุพรรษา พูลตา
2
27
พฤ 18 ม.ค. 2018 6:49 pm โดย Before Dong
งานประจำวันที่ 18 มกราคม 2561
โดย Four พฤ 18 ม.ค. 2018 9:24 am บอร์ด MT22 - อิษยา งามสอาด
1
21
พฤ 18 ม.ค. 2018 11:44 am โดย Four
VDO สอนพัฒนา Componet Joomla ภาษาอังกฤษ By Mindphp Developer Team
โดย mindphp พฤ 18 ม.ค. 2018 6:21 am บอร์ด Joomla Development
0
13
พฤ 18 ม.ค. 2018 6:21 am โดย mindphp
Ozio Gallery-Components & Plugins สำหรับช่วยให้ดูภาพที่เผยแพร่บน Googleและวีดีโอจาก Youtube ที่ละเอียด
โดย Parichat พ 17 ม.ค. 2018 7:30 pm บอร์ด Joomla Extension Review
0
23
พ 17 ม.ค. 2018 7:30 pm โดย Parichat
ตัวดำเนินการของตัวแปร List
โดย Four พ 17 ม.ค. 2018 4:35 pm บอร์ด Python Knowledge
0
15
พ 17 ม.ค. 2018 4:35 pm โดย Four
การใช้ Del statement
โดย Four พ 17 ม.ค. 2018 4:03 pm บอร์ด Python Knowledge
0
15
พ 17 ม.ค. 2018 4:03 pm โดย Four
Review Applications 17 มกราคม 2561
โดย Jom07 พ 17 ม.ค. 2018 3:44 pm บอร์ด MT23 - สุพรรษา พูลตา
1
18
พ 17 ม.ค. 2018 6:19 pm โดย Jom07
การใช้ Precedence
โดย Four พ 17 ม.ค. 2018 3:36 pm บอร์ด Python Knowledge
0
15
พ 17 ม.ค. 2018 3:36 pm โดย Four
โครงสร้าง Module
โดย tsukasaz พ 17 ม.ค. 2018 3:08 pm บอร์ด Joomla Dev
0
8
พ 17 ม.ค. 2018 3:08 pm โดย tsukasaz
Index VDO Reenigne – คุณวีรศักดิ์ - odoo 10
โดย Four พ 17 ม.ค. 2018 2:33 pm บอร์ด MT22 - อิษยา งามสอาด
0
8
พ 17 ม.ค. 2018 2:33 pm โดย Four
งานประจำวันที่ 17 มกราคม 2561
โดย Four พ 17 ม.ค. 2018 9:56 am บอร์ด MT22 - อิษยา งามสอาด
3
32
พ 17 ม.ค. 2018 4:36 pm โดย Four
Work's on Hand ปาริชาติ รัตโณภาส MT21
โดย Parichat จ 08 ม.ค. 2018 12:11 pm บอร์ด MT21 - ปาริชาติ รัตโณภาส
2
52
พ 17 ม.ค. 2018 10:51 am โดย Parichat
งานประจำวันที่ 17 มกราคม 2561
โดย Parichat พ 17 ม.ค. 2018 9:47 am บอร์ด MT21 - ปาริชาติ รัตโณภาส
11
60
พ 17 ม.ค. 2018 7:31 pm โดย Parichat
ไอเดียในการออกแบบ iphone8
โดย Before Dong พ 17 ม.ค. 2018 10:29 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
24
พ 17 ม.ค. 2018 10:29 am โดย Before Dong