ReactJS - 路由

在本章中，我們將學習如何為應用程式設定路由。

步驟 1 - 安裝 React Router

安裝 react-router 的一種簡單方法是在 命令提示符視窗中執行以下程式碼片段。

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

應用程式啟動時，我們將看到三個可點選的連結，可用於更改路由。