做 SPA 囉~~ 唉不是！此 SPA 非彼 SPA。。。。

今天要學習 React router，並透過 Single Page Application(SPA) 了解 React router 的運作。在 Single Page Application 的網址更動時，需要透過 router 來追蹤處理這些變動的內容，但 React 本身並不是框架，它並不具有路由的設計，因此，React router 誕生了!

這邊建置 SPA 並不是重點，所以我直接到 Start Bootstrap 快速載一個模板喔!

安裝 React router

安裝的指令：

npm install -S react-router

在開發單頁面應用，需要依賴 HTML5 history API，才不致在頁面跳轉時找不到頁面，因此我們也需要安裝 HTML5 history

npm install -S history@1

在 package.json 裡面可以看到第 16 行和 19 行，分別是 history 和 react-router

Router 的任務

當我們在 nav bar 切換不同頁面時，route 負責在網址後面加上切換後的＃網址，允許我們進到不同頁面和不同的應用程式狀態

在 client.js 裡，引入以下

import { Router, Route, IndexRoute, hashHistory } from "react-router";

在撰寫渲染邏輯的地方，可以直接渲染 router

ReactDOM.render(
  <Router history={hashHistory}>
    
  </Router>,
app);

在 router 裡，我們便可以把要渲染的 route 一併放進來，

ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={Layout}>
      <IndexRoute component={Featured}></IndexRoute>
      <Route path="archives(/:article)" name="archives" component={Archives}></Route>
      <Route path="settings" name="settings" component={Settings}></Route>
    </Route>
  </Router>,
app);

我在 layout.js 裡加上一個 button，這個 button 是要嵌入連結，連到另一個頁面，所以要先從 react-router 引入 link

import { Link } from "react-router";

先測試渲染結果，我加上兩個 <Link></Link>，連結的寫法是 to=""，所以這個連結指向 archives

<Link to="archives">Archive</Link>
<Link to="settings">Setting</Link>

現在我點擊不同的連結便會到達該頁面。

bootstrap 允許我們在 Link 裡面加上 class，方便我們設定樣式

<Link to="archives" class="btn btn-danger">Archive</Link>
<Link to="settings" class="btn btn-success">Setting</Link>

我們創建一個按鈕

  <button onClick={this.navigate.bind(this)}>Feature</button>
  

並寫一個 navigate function

navigate(){
  this.props.history.replaceState(null, "/");
}

當點擊 Feature 按鈕便會看到切換的網址

在這邊，HTML5 提供了 replaceState 和 pushState 兩種操控瀏覽器歷史紀錄的方法

可以參考 MDN