摘要：是你需要渲染到頁面的匹配規(guī)則的組件舉例最后一個將會渲染到內(nèi)。舉例回調(diào)函數(shù)接收兩個參數(shù)是一個包含了所有匹配組件的一個組件，它用來渲染你的組件。調(diào)用或者是返回將會阻止阻止事件發(fā)射。

React Router 一個針對React而設(shè)計的路由解決方案、可以友好的幫你解決React components 到URl之間的同步映射關(guān)系。

在闡明React Router可以幫你解決的問題之前我們來舉一個沒有引用React Router 的簡單例子。

沒使用 React Router

var About = React.createClass({
  render: function () {
    return 
About
;
  }
});

var Inbox = React.createClass({
  render: function () {
    return 
Inbox
;
  }
});

var Home = React.createClass({
  render: function () {
    return 
Home
;
  }
});

var App = React.createClass({
  render () {
    var Child;
    switch (this.props.route) {
      case "about": Child = About; break;
      case "inbox": Child = Inbox; break;
      default:      Child = Home;
    }

    return (
      

        
App
        
      
    )
  }
});

function render () {
  var route = window.location.hash.substr(1);
  React.render(, document.body);
}

window.addEventListener("hashchange", render);
render(); // render initially

在hash值改變的時候，App 將會根據(jù)this.props.route 值的改變來動態(tài)渲染 component。
這樣子的做法看起來很直接，但是這也會讓整個應用程序變得更加復雜。
我們可以想想，如果組件 Inbox 有一些內(nèi)嵌的子組件需要根據(jù) 例如 inbox/message/:id 或者 inbox/unread 等這樣的路由規(guī)則做動態(tài)渲染的時候。我們需要一些更加智能的手段來把路由信息傳遞給我們的App，這樣Inbox 組件可以根據(jù)URL的映射關(guān)系來控制哪些子組件應該需要被渲染。我們的很多組件應該根據(jù)URL的規(guī)則來做動態(tài)渲染。在不使用路由規(guī)則的前提下，復雜一點的路由需求就需要我們寫很多條件判斷的代碼去去解決實RL和層級組件的同步問題。

引入路由

解決復雜的URL和層級組件之間的映射關(guān)系式React Router 的核心。我們使用聲明式的方式為我們舉的例子引入路由。我們使用JSX的方式來進行路由的配置，這樣我們可以通過屬性的方式來配置頁面視圖的層級關(guān)系。
先來看看路由的配置

var Router = require("react-router");
var Route = Router.Route;

// declare our routes and their hierarchy
var routes = (
  
    
    
  
);

我們刪除掉一些在組件內(nèi)判斷路由邏輯的代碼。然后用 替換 .然后代碼變成下面這個樣子。

var RouteHandler = Router.RouteHandler;

var App = React.createClass({
  render () {
    return (
      

        
App
        
      
    )
  }
});

最后我們需要監(jiān)聽url的變化來動態(tài)渲染應用，加入下面的代碼。

  Router.run(routes, Router.HashLocation, (Root) => {
  React.render(, document.body);
});

Root 是 React Router 路由匹配后決定渲染的最高層級的組件，告訴 RouterHandle 應該渲染的內(nèi)容是什么。
組件是不會被渲染的。只是一個創(chuàng)建內(nèi)部路由規(guī)則的配置對象。

接下來我們?yōu)閼锰砑痈嗟腢I組件
現(xiàn)在我們計劃給Inbox UI 添加Inbox message 子組件。首先我們需要添加一個新的Message組件。然后我們在原有的inbox路由下面為 Message 組件添加新的路由，這樣就可以得到嵌套的UI。

var Message = React.createClass({
  render () {
    return 
Message
;
  }
});

var routes = (
  
    
    
      
    
  
);

現(xiàn)在我們訪問 inbox/message/jKei3c32c的URL就可以匹配到新的路由規(guī)則并可以匹配到App->Inbox->Message 這個分支下的UI。

獲取url的參數(shù)
我們需要獲取到一些Url的信息，這樣我們可以根據(jù)這些參數(shù)從服務器端獲取數(shù)據(jù)。我們把交給匹配好的組件稱為RouterHandler. RouterHandler 實例可以獲取到一些非常有用的屬性當你渲染組件的時候。特別是一些從URL動態(tài)獲取的參數(shù)信息。比如在我們舉例中得 :id

var Message = React.createClass({
  componentDidMount: function () {
    // from the path `/inbox/messages/:id`
    var id = this.props.params.id;
    fetchMessage(id, function (err, message) {
      this.setState({ message: message });
    })
  },
  // ...
});

嵌套的UI和多層級的URLs是 不需要耦合的。
有了React Router，我們不需要用嵌套UI的方式來對應多層級的URL。反過來，獲取嵌套組件的UI，我們也不需要有多層級的URL與它對應。

比如說我們有/about/company 這樣的URL，我們不需要嵌套UI組件到About組件中。

var routes = (
  
    
    
  
);

雖然說我們的URL是有層級嵌套的，但是我們UI組件中得 About 組件和 Company 組件卻可以是相鄰展平在同級目錄的。

現(xiàn)在讓我們往路由中添加url /archive/messages/:id 然后讓該路由嵌套到inbox UI里面，即使 這個URL不跟上層 Router 的URL 嵌套。我們需要做三件事讓匹配下面規(guī)則的路由正常工作。

1、url 要以 / 這樣的絕對路徑開頭，這代表不會從父路由繼承路由規(guī)則。
2、嵌套在Inbox route 中的router 會導致UI組件的層級嵌套。
3、確定你已經(jīng)有必需的動態(tài)URL片段，在這里我們只有 :id ,所以處理起來相當簡單。

var routes = (
  
    
      
      
    
  
);

這就是React Router的核心，應用的UI組件是層層嵌套的?，F(xiàn)在我們可以讓這些嵌套的UI組件和URL規(guī)則保持同步了。

一個RefaultRoute 是一個已匹配父組件會默認展示的子組件。
你期望在沒有子組件被匹配的時候一個子RouterHandler總是能夠渲染到頁面。

Props
handle
RouterHandler 是你需要渲染到頁面的匹配規(guī)則的組件
name (可選)
當你使用linking 和 transitioning 的路由名字

舉例

NotFoundRoute 會在父組件匹配成功但沒有一個同級組件被匹配的時候會被激活。
你可以使用它來處理不合法的鏈接。

提示
NotFoundRoute不是針對當資源沒有被找到而設(shè)計的。路由沒有匹配到特定的URL和通過一個合法的URL沒有查找到資源是有卻別的。url course/123 是一個合法的url并能夠匹配到對應的路由，所以它是找到了的意思。但是通過123 去匹配資源的時候卻沒有找到，這個時候我們并不像跳轉(zhuǎn)到一個新的路由，我們可以設(shè)置不同的狀態(tài)來選軟不同的UI組件，而不是通過NotFoundRoute 來解決。

props

handler
RouterHandler 是你需要渲染到頁面的匹配規(guī)則的組件

舉例

最后一個 NotFoundRoute 將會渲染到 APP 內(nèi)。 第一個將會被渲染到Course 內(nèi)。

Recirect 可以跳轉(zhuǎn)到另外一個路由中。

props

from
你想開始redirect的地址，包括一些動態(tài)的地址。默認為* ,這樣任何匹配不到路由規(guī)則的情況多回被重定向到另外一個地方。
to
你想要重定向到得路由名字。
params
默認情況下，這些參數(shù)將會自動傳遞到新的路由，你也可以指定他們，特別是你不需要的時候。
query
和params一樣

舉例

能夠被放置到路由的任何層級。如果你選擇把它放在路由某一層級的下方，那么from路徑也會匹配到它上層的路徑。

Route 用于聲明式地映射路由規(guī)則到你多層嵌套的應用組件。
props
name(可選)
name 在路由中是唯一的，被使用在 Link 組件和路由轉(zhuǎn)換的方法中。
path(optional)
在url中使用的路徑，如果不填寫的話，路徑就是name，如果name也沒有的話，默認就是 /.
handler
當路由被匹配的時候會被 RouteHander 渲染的組件。
children
路由是可以嵌套的，如果子路由的路徑被匹配，那么父路由也處于激活狀態(tài)。

ignoreScrollBehavior
當路由或者路由的params 改變的時候，路由會根據(jù)scrollBehavior 來調(diào)整頁面滾動條的位置。但是 你也可以不選擇這項功能，特別是在一些搜索頁面或者是 tab切換的頁面。

創(chuàng)建一個新的路由。

Signature
Router.create(options)

Options
routes

location

scrollBehavior

onAbort
Used server-side to know when a route was redirected.

Method
run(callback)
啟動路由，和Router.run 一樣

舉例

// the more common API is
Router.run(routes, Router.HistoryLocation, callback);

// which is just a shortcut for
var router = Router.create({
  routes: routes,
  location: Router.HistoryLocation
});

router.run(callback);

The main API into react router. It runs your routes, matching them against a location, and then calls back with the next state for you to render.

signature

Router.run(routes,[location,],callback)
參數(shù)
routes
location (可選)
默認值是Router.HashLocation 如果你設(shè)置了Location 那么它的改變會被監(jiān)聽。如果你設(shè)置了一個字符路勁，那么路由會立即匹配并執(zhí)行回調(diào)函數(shù)。

舉例

// Defaults to `Router.HashLocation`
// callback is called whenever the hash changes
Router.run(routes, callback);

// HTML5 History
// callback is called when history events happen
Router.run(routes, Router.HistoryLocation, callback);

// Server rendering
// callback is called once, immediately.
Router.run(routes, "/some/path", callback);

callback(Root,state)
回調(diào)函數(shù)接收兩個參數(shù)
1、 Root
2、 state

Root
是一個包含了所有匹配組件的一個組件，它用來渲染你的組件。
state
一個包含了匹配狀態(tài)的對象。
state.path
帶有查詢參數(shù)的當前URL
state.action
一個觸發(fā)路由改變的操作
state.pathname
不帶查詢參數(shù)的URL
state.params
當前被激活路由匹配路徑對應的參數(shù) 如 /:id 對應的id值.

state.query
當前被激活路由匹配路徑對應的查詢參數(shù)
state.routes
包含了匹配路由的數(shù)組，在組件渲染之前獲取數(shù)據(jù)會顯得很有幫助。
可以查看 example async-data

舉例

基本用法

javascript
Router.run(routes, function (Root) {
// whenever the url changes, this callback is called again
React.render(, document.body);
});

var resolveHash = require("when/keys").all;

var SampleHandler = React.createClass({
statics: {

// this is going to be called in the `run` callback
fetchData: function (params) {
  return fetchStuff(params);
}

},
// ...
});

Router.run(routes, Router.HistoryLocation, function (Root, state) {

// create the promises hash
var promises = state.routes.filter(function (route) {

// gather up the handlers that have a static `fetchData` method
return route.handler.fetchData;

}).reduce(function (promises, route) {

// reduce to a hash of `key:promise`
promises[route.name] = route.handler.fetchData(state.params);
return promises;

}, {});

resolveHash(promises).then(function (data) {

// wait until we have data to render, the old screen stays up until
// we render
React.render(, document.body);

});
});

something.serve(function (req, res) {
Router.run(routes, req.path, function (Root, state) {

// could fetch data like in the previous example
fetchData(state.matches).then(function (data) {
  var html = React.renderToString();
  res.send(html);
});

});
});

#Components

##Link
用于在應用程序中導航的一種主要方式。``Link``將會渲染出標簽屬性href 變得容易被理解。
當``Link``定位的路由被激活的時候自動 顯示為 定義的 ``activeClassName`` 和/或者
``activeStyle`` 定義的樣式。

**Props**
``to``
要被定位到的路由名字，或者是完整的路徑

``params``

包含了名字/值的對象，和路由地址的動態(tài)段對應一致。

``query``

一個包含名字/值 的對象，它會成為地址中的查詢參數(shù)

**舉例**

// given a route config like this

// create a link with this

// though, if your user properties match up to the dynamic segements:

``query``

一個包裝成javascript對象的字符串查詢參數(shù)

``activeClassName``

當路由被激活是 ``Link`` 接收的 className,默認值為 ``active``

``activeStyle ``

當路由被激活是鏈接元素 展示的style樣式。

``onClick``

對點擊時間的常規(guī)處理，僅僅在標簽```` 上起效。調(diào)用 ``e.preventDefault`` 或者是返回false 將會阻止阻止事件發(fā)射。通過 ``e.stopPropagation()`` 將會阻止時間冒泡。

**others**

你也可以在上傳遞 props，例如 title,id , className 等。

**舉例**

提供一個形式像 ``:`` 這樣的路由

##Root
React router 創(chuàng)建的應用頂層組件。

**舉例**

**說明**
當前路由的實例和 ``Root`` 一致。

當前這僅僅是一個實現(xiàn)的細節(jié)，我們會逐步將它設(shè)計成一個公共的API。


##Route Handler
用戶定義的一個組件，作為傳遞給``Routes`` 的一個 ``handler`` 屬性。 路由會在你通過 ``RouterHandler`` 渲染組件的時候給你注入一些屬性值。同時在路由轉(zhuǎn)換的時候調(diào)用一些生命周期的靜態(tài)方法。

**注入的屬性**

``params``

url 中的動態(tài)段。

``query``

url中的查詢參數(shù)

``path``

完整的url 路勁

**舉例**

this.props.params.courseId; // "123"
this.props.query.sort; // "name"
this.props.path; // "/course/123/students?sort=name"
// ...

**靜態(tài)的生命周期方法**

你可以定義一些在路由轉(zhuǎn)換時會調(diào)用的靜態(tài)方法到你的路由handler 對應的組件中。

``willTransitionTo(transition,params,query,callback)``

當一個handler 將要被渲染的時候被調(diào)用。為你提供了中斷或者是重定向的機會。你可以在異步調(diào)用的時候暫停轉(zhuǎn)換，在完成之后可以調(diào)用``callback(error)``  方法?；蛘咴趨?shù)列表中省略callback。

``willTranstionFrom(transition,component,callback)``

當一個被激活路由將要跳出的時候給你提供了中斷跳出的方法。``component`` 是當前的組件。你可能需要檢查一下 state 的狀態(tài)來決定是否需要跳出。

**關(guān)于 ``callback`` 的參數(shù)**

 如果你在參數(shù)列表中添加了callback，你需要在最后的時候調(diào)用它，即使你使用的是重定向。

**舉例**

willTransitionTo: function (transition, params, query, callback) {
  auth.isLoggedIn((isLoggedIn) => {
    transition.abort();
    callback();
  });
},

willTransitionFrom: function (transition, component) {
  if (component.formHasUnsavedData()) {
    if (!confirm("You have unsaved information,"+
                 "are you sure you want to leave this page?")) {
      transition.abort();
    }
  }
}