前端路由

在web應(yīng)用開發(fā)中，路由系統(tǒng)是不可或缺的一部分。路由簡單來說就是當(dāng)url發(fā)生變化時，web界面也會隨之改變。主流的前端框架都有自己的路由實現(xiàn)，而React也不例外，React-router就是facebook官方維護(hù)的路由系統(tǒng)

基本用法

//首先定義基本的組件
'use strict';
import React from 'react';
import ReactDOM from 'react-dom';
import {Router,Route,hashHistory} from 'react-router';
class App extends React.Component{
    render(){
        return (
            <div>
                <h3>首頁</h3>
                {this.props.children}
            </div>
        )
    }
}
//將Router作為React的一個組件
ReactDOM.render(
(
<Router history={hashHistory}>
  <Route path="/" component={App}/>
</Router>
),document.getElementById('app')
);

在這個例子中，從react-router包導(dǎo)入了Router、Route、hashHistory模塊。其中Router僅僅是路由組件的容器，history屬性決定了路由的實現(xiàn)類型，而真正的路由需要使用Route來定義。
　　Route兩個基本屬性，path和component，顯而易見path指的是路由地址，而component則表示訪問該地址將要顯示的組件。
　　運行上面這個例子，瀏覽器輸入localhost:8080，地址將會變成http://localhost:8080/#/XXX=XXXXX這種形式，因為我們將history屬性設(shè)置為hashHistory,表示使用hash的形式來切換路由，所以url地址將會是以上這樣。
　　history屬性一共有三個值，分別為hashHistory、browserHistory、createMemoryHistory。其中hashHistory兼容性最好，browserHistory需要對服務(wù)器進(jìn)行改造，否則用戶直接向服務(wù)器請求某個子路由，會顯示網(wǎng)頁找不到的404錯誤,而createMemoryHistory主要用于服務(wù)器端渲染，不與瀏覽器互動。

嵌套與匹配規(guī)則

嵌套

路由就是組件，所以可以像React組件一樣進(jìn)行嵌套

//增加幾個組件
...省略部分代碼
class Repos extends React.Component{
    render(){
        return (
            <div>
                <h3>keke</h3>
            </div>
        )
    }
}
class About extends React.Component{
    render(){
        return(
            <div>
                <h3>haha</h3>
            </div>
        )
    }
}
ReactDOM.render(
(
<Router history={hashHistory}>
  <Route path="/" component={App}>
    <Route path="/repos" component={Repos}/>
    <Route path="/about" component={About}/>
  </Route>
</Router>
),document.getElementById('app')
);

這時訪問/repos將會顯示Repos組件，同樣訪問/about將會顯示About組件，如果有更多組件，可以繼續(xù)深層次的進(jìn)行嵌套

path屬性

路由組件的path指定路由的匹配規(guī)則,在父子嵌套關(guān)系下，父級路由的這個屬性也可以省略

<Route path="inbox" component={Inbox}> 
  <Route path="messages/:id" component={Message} />
</Route>
//當(dāng)用戶訪問/inbox/messages/:id時，會加載Inbox以及Message組件
//如果省略父級的path屬性，可以寫成這樣
<Route component={Inbox}> 
  <Route path="inbox/messages/:id" component={Message} />
</Route>
//訪問/inbox/messages/:id時，依然會加載嵌套的兩個組件

path屬性通配符

path屬性也可以使用通配符

<Route path="/hello/:name">
// 匹配 /hello/michael
// 匹配 /hello/ryan

<Route path="/hello(/:name)">
// 匹配 /hello
// 匹配 /hello/michael
// 匹配 /hello/ryan

<Route path="/files/*.*">
// 匹配 /files/hello.jpg
// 匹配 /files/hello.html

<Route path="/files/*">
// 匹配 /files/ 
// 匹配 /files/a
// 匹配 /files/a/b

<Route path="/**/*.jpg">
// 匹配 /files/hello.jpg
// 匹配 /files/path/to/file.jpg

:paramName匹配URL的一個部分，直到遇到下一個/、?、#為止。這個路徑參數(shù)可以通過this.props.params.paramName取出

()()表示URL的這個部分是可選的

*匹配任意字符，直到模式里面的下一個字符為止。匹配方式是非貪婪模式

**匹配任意字符，直到下一個/、?、#為止。匹配方式是貪婪模式

<Route path="/comments" ... />
<Route path="/comments" ... />
//相同路徑匹配兩個或多個規(guī)則時，只有第一個會生效

<Router> 
  <Route path="/:userName/:id" component={UserPage}/> 
  <Route path="/about/me" component={About}/>
</Router>
//這里訪問/about/me時并不會觸發(fā)第二個規(guī)則，因為它會首先匹配/:userName/:id

其他組件

React-router還提供了一些功能性組件，使用時需要導(dǎo)入模塊

import {Router,Route,Link,hashHistory,IndexRoute,Redirect,IndexRedirect,IndexLink,browserHistory} from 'react-router';

IndexRoute組件

表示當(dāng)訪問根路徑/時，如果沒有匹配任何子組件，將要顯示的一個默認(rèn)組件（類似于組件的index.html）

<Router> 
<Route path="/" component={App}> 
  <IndexRoute component={Home}/>
 </Route>
</Router>

這里訪問根路徑 /將會顯示默認(rèn)子組件Home

Redirect 組件

用于定義路由的重定向，使用戶訪問一個路由時，自動跳轉(zhuǎn)到另一個路由

...省略部分代碼
<Redirect from="/repos" to="/repos/form"/>

現(xiàn)在訪問/repos時，會自動跳轉(zhuǎn)到/repos/form

IndexRedirect 組件

專門用于定義根路徑的重定向，用法與Redirect類似

<IndexRedirect to="/welcome"/>

Link組件

相當(dāng)于React版的a標(biāo)簽

<Link to="/about/contact">about！</Link>
//點擊后將跳轉(zhuǎn)到/about/contact路由

IndexLink組件

也是專門用于鏈接根路徑的Link組件

<IndexLink className="btn btn-default" to="/">返回首頁</IndexLink>
//點擊后將跳轉(zhuǎn)到根路徑

以上