ReactJS - เราเตอร์

ในบทนี้เราจะเรียนรู้วิธีตั้งค่าการกำหนดเส้นทางสำหรับแอป

ขั้นตอนที่ 1 - ติดตั้ง React Router

วิธีง่ายๆในการติดตั้งไฟล์ react-router คือการเรียกใช้ข้อมูลโค้ดต่อไปนี้ในไฟล์ command prompt หน้าต่าง.

C:\Users\username\Desktop\reactApp>npm install react-router

ขั้นตอนที่ 2 - สร้างส่วนประกอบ

ในขั้นตอนนี้เราจะสร้างส่วนประกอบสี่ส่วน Appส่วนประกอบจะถูกใช้เป็นเมนูแท็บ อีกสามองค์ประกอบ(Home), (About) และ (Contact) จะแสดงผลเมื่อเปลี่ยนเส้นทาง

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router'

class App extends React.Component {
   render() {
      return (
         <div>
            <ul>
            <li>Home</li>
            <li>About</li>
            <li>Contact</li>
            </ul>
            {this.props.children}
         </div>
      )
   }
}
export default App;

class Home extends React.Component {
   render() {
      return (
         <div>
            <h1>Home...</h1>
         </div>
      )
   }
}
export default Home;

class About extends React.Component {
   render() {
      return (
         <div>
            <h1>About...</h1>
         </div>
      )
   }
}
export default About;

class Contact extends React.Component {
   render() {
      return (
         <div>
            <h1>Contact...</h1>
         </div>
      )
   }
}
export default Contact;

ขั้นตอนที่ 3 - เพิ่มเราเตอร์

ตอนนี้เราจะเพิ่มเส้นทางไปยังแอพ แทนการแสดงผลApp เช่นในตัวอย่างก่อนหน้านี้ในครั้งนี้ Routerจะแสดงผล เราจะกำหนดส่วนประกอบสำหรับแต่ละเส้นทางด้วย

main.js

ReactDOM.render((
   <Router history = {browserHistory}>
      <Route path = "/" component = {App}>
         <IndexRoute component = {Home} />
         <Route path = "home" component = {Home} />
         <Route path = "about" component = {About} />
         <Route path = "contact" component = {Contact} />
      </Route>
   </Router>
), document.getElementById('app'))

เมื่อแอปเริ่มทำงานเราจะเห็นลิงก์ที่คลิกได้สามลิงก์ที่สามารถใช้เพื่อเปลี่ยนเส้นทาง