ReactJS – Bộ định tuyến

18/03/2021

836

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

Một cách đơn giản để cài đặt bộ định tuyến phản ứng là chạy đoạn mã sau trong cửa sổ dấu nhắc lệnh .

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. Thành phần Ứng dụng sẽ được sử dụng như một menu tab. Ba thành phần khác (Trang chủ), (Giới thiệu) và (Liên hệ) đượ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ì hiển thị phần tử Ứng dụng như trong ví dụ trước, lần này Bộ định tuyến sẽ được hiển thị. 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 tôi sẽ thấy ba liên kết có thể nhấp được có thể được sử dụng để thay đổi lộ trình.