攻城獅跳火圈

 

要建立SPA(Single Page Application)的程式，首先需要一個Router機制，用來處理頁面的切換。React官方沒有提供Router機制，所以就有人寫了一個Library以提供Router的功能，也就是要介紹的這一個Package: react-router

 

簡單的Routing Configuration

---

react-router的概念跟ASP.NET MVC中的概念很像，就是使用一個Routing Configuration來定義網址與處理頁面(React中對應的概念就是處理該網址的React Component)。

一個簡單的Routing Configuration會長這個樣子

// declare our routes and their hierarchy
var routes = (
  <Route>
    <Route path="PageA" handler={About}/>
    <Route path="PageB" handler={Inbox}/>
  </Route>
);

其中path是指巡覽的網址，handler是指處理該網址需求的React Component。

在這種簡單的設定之下，可以用網址簡單的切換不同頁面。如下圖所示

 

Master Page的Routing Configuration設定

---

而較為複雜一點的頁面，會有Master Page的結構。也就是最外層有一個固定的主頁面，裡面包含著一個Container，再依據不同的網址切換Container的內容。這種結構下的Routing Configuration會類似底下的Example：

var routes = (
  <Route handler={App} path="/">
    <DefaultRoute handler={Home} />
    <Route name="about" handler={About} />
    <Route name="users" handler={Users}>
      <Route name="recent-users" path="recent" handler={RecentUsers} />
      <Route name="user" path="/user/:userId" handler={User} />
      <NotFoundRoute handler={UserRouteNotFound}/>
    </Route>
    <NotFoundRoute handler={NotFound}/>
  </Route>
);

可以看到最外層有一個Route，包著內層Route，以及DefaultRoute, NotFoundRoute等React Component。 這也就是說，外層Route所定義的handler => App是作為Master Page之用。若網址加上about，則會切換內層的元件為About這個handler。若網址沒有加上任何的參數，則會採用DefaultRoute的設定，使用Home這個handler。若網址後加入的參數，是沒有設定在Route Configuration中的，則會採用NotFoundRoute的設定，使用UserRouteNotFound這個handler。

App這個React Component作為Master Page，其實作法很簡單。檢視其程式碼(如下)可以發現，有一個React Component-RouteHandler，就是用來處理內層Route之用。

var RouteHandler = Router.RouteHandler;

var App = React.createClass({
  render () {
    return (
      <div>
        <h1>App</h1>
        <RouteHandler/>
      </div>
    )
  }
});

 

完整的Routing宣告及設定

---

要順序的使用react-routing，就需要完整的宣告及設定react-routing 的 React Component。這包含了幾個部分

• React Component宣告

包含了基本的Router物件，以及相關連的子物件。

var Router = require('react-router');
var Route = Router.Route;
var NotFoundRoute = Router.NotFoundRoute;
var DefaultRoute = Router.DefaultRoute;
var RouteHandler = Router.RouteHandler;
var Link = Router.Link;

 

• Routing Configuration

Routing Configuration是用來設定處理不同網址的React Component

var routes = (
	<Route path='/' handler={App}>
		<Route name="A" path="PageA" handler={PageA}/>
		<Route name="B" path="PageB" handler={PageB}/>
		<Route name="C" path="PageC" handler={PageC}/>
		<NotFoundRoute handler={NotFound} />
		<DefaultRoute  handler={HelloMessage}/>
    </Route>
	);

 

• Router Run

最後要把react-router套用在React的virtual DOM的處理上

Router.run(routes, Router.HashLocation, function(Root) {
    React.render(<Root/>, document.getElementById('app'));
});

 

設定連結－切換頁面

---

設定好react-router之後，接下來就要知道如何套用這個機制來進行切換頁面。基本上，切換頁面最直接的方式，就是使用<a></a>標籤，在href屬性中設定連結的網址就可以了。react-router也提供了Link這個React Component，不同於<a></a>標籤，需要設定to屬性，該屬性要指定的是Route的name。基本上，Link這個React Component最後也是轉換成<a></a>標籤。

 

以上的方式是直接設定在標籤中，如果想透過程式動態的換頁，那麼react-router也提供了mixins的function - transitionTo()以供使用。一個使用以上三種方式的Example如下所示：

var App = React.createClass({
  mixins: [Navigation],
  transitionToPageC: function(){
    this.transitionTo('/PageC');
  },
  render: function() {
    return (
      <div>
        <h1>App</h1>
        <a href="#PageA">Page A</a>
        <Link to='B'>Page B</Link>
        <input type='button' onClick={this.transitionToPageC} value='Page C'></input>
        <hr/>
        <RouteHandler/>
      </div>
    )
  }
});

 

寫好一個簡單的範例程式碼放在GitHub=>這裡。這篇筆記只是簡單的介紹react-router的使用方式，若需要更詳盡的資訊，請參考官方說明文件。