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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ถ้าจะให้้มีคนกดซับเพิ่มขึ่นต้องทำไง
โดย totzazx789 พ 18 ก.ย. 2019 10:40 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
5
พ 18 ก.ย. 2019 10:40 pm โดย totzazx789
สอบถามเกี่ยวกับ list ใน Tkinter ค่ะ
โดย mashato พ 18 ก.ย. 2019 8:45 pm บอร์ด Programming - C/C++ & java & Python
0
8
พ 18 ก.ย. 2019 8:45 pm โดย mashato
ทำกราฟ เปรียบเทียบ ค่าธรรมเนียมของแต่ละธนาคาร
โดย chatee supasand พ 18 ก.ย. 2019 7:24 pm บอร์ด MT33 - นายชาตรี สุภาแสน
1
7
พ 18 ก.ย. 2019 7:29 pm โดย mindphp
ทำไมต้องอัพเกรดและวิธีอัพเกรด Ubuntu
โดย jirawoot พ 18 ก.ย. 2019 7:02 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
11
พ 18 ก.ย. 2019 7:02 pm โดย jirawoot
Adobe Premiere Pro เปิดตัวฟีเจอร์ปรับขนาดเฟรมวิดีโออัตโนมัติด้วย AI รองรับโซเชียลแอป
โดย birdkritsna พ 18 ก.ย. 2019 6:05 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
16
พ 18 ก.ย. 2019 6:05 pm โดย birdkritsna
ทำความรู้จัก Tape Backup
โดย aninthana พ 18 ก.ย. 2019 5:57 pm บอร์ด Web Hosting Review - Free Host Share Host VPS
0
14
พ 18 ก.ย. 2019 5:57 pm โดย aninthana
VDO แนะนำการสมัคร skype
โดย chatee supasand พ 18 ก.ย. 2019 3:58 pm บอร์ด MT33 - นายชาตรี สุภาแสน
1
8
พ 18 ก.ย. 2019 4:51 pm โดย mindphp
R - tools_exchange_rate
โดย birdkritsna พ 18 ก.ย. 2019 2:18 pm บอร์ด M094 - กฤษณะ จะโรจน์รัมย์
0
19
พ 18 ก.ย. 2019 2:18 pm โดย birdkritsna
งานประจำวันที่ 18 กันยายน 2562
โดย birdkritsna พ 18 ก.ย. 2019 10:26 am บอร์ด M094 - กฤษณะ จะโรจน์รัมย์
1
13
พ 18 ก.ย. 2019 7:38 pm โดย birdkritsna
งานประจำวันที่ 18 กันยายน 2562
โดย Patipat พ 18 ก.ย. 2019 10:20 am บอร์ด M088 - ปฏิภัทร สารธรรม
1
4
พ 18 ก.ย. 2019 7:22 pm โดย Patipat
งานประจำวันที่ 18 กันยายน 2562
โดย chatee supasand พ 18 ก.ย. 2019 10:16 am บอร์ด MT33 - นายชาตรี สุภาแสน
2
13
พ 18 ก.ย. 2019 7:27 pm โดย chatee supasand
งานประจำวันที่ 18 กันยายน 2562
โดย jirawoot พ 18 ก.ย. 2019 10:06 am บอร์ด M090 - นายจิระวุฒิ อัครลิขิตกุล
3
9
พ 18 ก.ย. 2019 7:42 pm โดย jirawoot
งานประจำวันที่ 18 กันยายน 2562
โดย jamepiyawat พ 18 ก.ย. 2019 10:05 am บอร์ด M084 - นายปิยวัช เชาว์วิมล
1
7
พ 18 ก.ย. 2019 8:03 pm โดย jamepiyawat
งานประจำวันที่ 18 กันยายน 2562
โดย aninthana พ 18 ก.ย. 2019 9:54 am บอร์ด M092 - อนินธนา บุญยัง
1
16
พ 18 ก.ย. 2019 6:42 pm โดย aninthana
สร้างแบบสอบถามออนไลน์ ด้วย Excel Survey บน OneDrive
โดย birdkritsna อ 17 ก.ย. 2019 6:31 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
34
อ 17 ก.ย. 2019 6:31 pm โดย birdkritsna
ทำไมจึงต้องมี Data Mining (เหมืองข้อมูล) ?
โดย birdkritsna อ 17 ก.ย. 2019 6:04 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
36
อ 17 ก.ย. 2019 6:04 pm โดย birdkritsna
ทำความรู้จักกับ Big Data คืออะไร
โดย birdkritsna อ 17 ก.ย. 2019 5:36 pm บอร์ด SQL Knowledge
1
48
อ 17 ก.ย. 2019 5:52 pm โดย mindphp
วิธีการใช้งานฟังชั่น serialize() กับ unserialize() ใน phpbb
โดย Ittichai_chupol อ 17 ก.ย. 2019 5:18 pm บอร์ด PHP Knowledge
0
25
อ 17 ก.ย. 2019 5:18 pm โดย Ittichai_chupol
รู้จักกับคลังข้อมูล(Data Warehouse) คืออะไร มีประโยชน์อะไรบ้าง
โดย birdkritsna อ 17 ก.ย. 2019 5:11 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
32
อ 17 ก.ย. 2019 5:11 pm โดย birdkritsna
MS Exchange ไมโครซอฟท์ต่ออายุซัพพอร์ต 2010 ให้อีก 9 เดือน ถึง ตุลาคม 2020
โดย chatee supasand อ 17 ก.ย. 2019 5:09 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
24
อ 17 ก.ย. 2019 5:09 pm โดย chatee supasand