ReactJS - Bộ định tuyến

Trong chương này, chúng ta sẽ tìm hiểu cách thiết lập định tuyến cho một ứng dụng.

Bước 1 - Cài đặt Bộ định tuyến React

Một cách đơn giản để cài đặt react-router là chạy đoạn mã sau trong command prompt cửa sổ.

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

Bước 2 - Tạo thành phần

Trong bước này, chúng ta sẽ tạo bốn thành phần. CácAppthành phần sẽ được sử dụng như một menu tab. Ba thành phần khác(Home), (About)(Contact) được hiển thị sau khi tuyến đường đã thay đổi.

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;

Bước 3 - Thêm Bộ định tuyến

Bây giờ, chúng tôi sẽ thêm các tuyến đường vào ứng dụng. Thay vì kết xuấtApp như trong ví dụ trước, lần này Routersẽ được kết xuất. Chúng tôi cũng sẽ thiết lập các thành phần cho mỗi tuyến đường.

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'))

Khi ứng dụng được khởi động, chúng ta sẽ thấy ba liên kết có thể nhấp được có thể được sử dụng để thay đổi lộ trình.