React-router

基本概念

import { Router, Route, Link } from 'react-router'

BrowserRouter：容器元件，在其內配置Route為真正的路由方面的東西；
Route：它最基本的職責是在location與路由路徑匹配時呈現相應的component；
Link：為應用程式提供宣告性的、可訪問的導航。(a標籤)

基礎元件

BrowserRouter

• basename:string
  為頁面的路由提供一個base URL；

   <BrowserRouter basename="/calendar"
 
/>
<Link to="/today"/> // renders <a href="/calendar/today">

• forceRefresh: bool
  為真時，使頁面強制重新整理，你可能只想用在那些尚不支援HTML5 History API的的瀏覽器上

Link

• to:string/object
  為string時：需要導航到路徑，如：<Link to="/courses"/>
  為object時：同為路徑，但可以攜帶部分內容

 <Link to={{
  pathname: '/courses',
  search: '?sort=name
 
',
  hash: '#the-hash',
  state: { fromDashboard: true }
}}/>

• replace:bool
  當為true時，單擊該連結將替換歷史堆疊中的當前條目，而不是新增一個新條目。

NavLink

<Link> 元件基礎上實現的，當我匹配上現在URL的時候會新增上餡餅的樣式屬性

• activeClassName:string
  顧名思義
• activeStyle:object
  顧名思義

 <NavLink
  to="/faq"
  activeStyle={{
    fontWeight: 'bold
 
',
    color: 'red'
   }}>
   FAQs</NavLink>

• exact:bool
  完全匹配才會啟用相關的樣式資訊
• strict:bool
  參考<Route Strict>
• isActive:func
  通過一個函式來決定是否啟用相關樣式資訊

 // only consider an event active if its event id is an odd number
const oddEvent = (match, location) => {
  if (!match) {
    return false
  }
  const eventID = parseInt(match.params.eventID)
  return !isNaN(eventID) && eventID % 2 === 1
}

<NavLink
  to="/events/123"
  isActive={oddEvent}>
  Event 123</NavLink>

Route

這可能是在React-Router中最重要的元件了。Route最基本的職責是在location與路由路徑匹配時適配合適的component
看看下面的程式碼大概就會明白：

<Router>
  <div>
    <Route exact path="/" component={Home}/>
    <Route path="/news" component={NewsFeed}/>
  </div>
</Router>

在訪問 / 路徑時應該會呈現如下的情況：

<div>
  <Home/>
  <!-- react-empty: 2 -->
</div>

在訪問 /news 路徑時應該會呈現如下的情況：

<div>
  <!-- react-empty: 1 -->
  <NewsFeed/>
</div>

這裡有三種方法可以實現路由，分別是：

• <Route component>
• <Route render>
• <Route children>

它們分別適合於不同的場景，通常情況下你只會用到第一種；但是這三種渲染方法都會傳遞三個相同的引數

• match
• location
• history

//console.log(this.props)會得到如下的內容
{
match: {…}, 
location: {…}, 
history: {…}, 
...}

引數說明

• component
  指定用來渲染的component
• path:string
  路徑引數，/user/:id後面的id為變數
• render:func
  當路徑匹配時會執行render內的函式，值得一提的是在設定有component 的情況下component 的優先順序更高，所以請不要同時使用component 和 render

• children:func

• exact:bool
  為true時，這條路徑會進行精確匹配，意味著／user只會在/user匹配而在/user/info就不會匹配

• strict:bool
  為true時會對‘／‘進行嚴格匹配，但這對當location.pathname中含有多餘的URL片段時並不會有影響。

<Route strict path="/one/" component={About}/>

<Route exact strict path="/one" component={About}/>

- loaction:object
暫空

IndexRoute

預設渲染

<Router>
  <Route path="/" component={App}>
    <IndexRoute component={Home}/>
    <Route path="accounts" component={Accounts}/>
    <Route path="statements" component={Statements}/>
  </Route>
</Router>

IndexLink

精確匹配‘／‘

Redirect

• to:string/obejct
  需要跳轉的URL
• push:bool
  為true時，重定向將會推動一個新的進入history，而不是取代當前的，類比於Link元件的replace屬性
• from:string

<Route path="inbox" component={Inbox}>
  {/* 從 /inbox/messages/:id 跳轉到 /messages/:id */}
  ＜Redirect from="messages/:id" to="/messages/:id" />
</Route>

訪問/inbox/messages/5，會跳轉到/message/5

路由匹配原理

• 路由巢狀

<Router history={hashHistory}>
  <Route path="/" component={App}>
    <Route path="/repos" component={Repos}/>
    <Route path="/about" component={About}/>
  </Route>
</Router>

訪問／repos會先載入App元件，然後在它內部再載入Repos元件。

<App>
  <Repos/>
</App>

App元件應寫成如下，其中this.props.children代表子元件

export default React.createClass({
  render() {
    return <div>
      {this.props.children}
    </div>
  }
})

• 路徑語法
  
  • :paramName
    :paramName匹配URL的一個部分，直到遇到下一個/、?、#為止。這個路徑引數可以通過this.props.params.paramName取出。<Route path="/hello/:name">
  • ()
    ()表示URL的這個部分是可選的。<Route path="/hello(/:name)">
  • *
    *匹配任意字元，直到模式裡面的下一個字元為止。匹配方式是非貪婪模式。<Route path="/files/*.*">
  • **
    ** 匹配任意字元，直到下一個/、?、#為止。匹配方式是貪婪模式。
• 優先順序
  最後，路由演算法會根據定義的順序自頂向下匹配路由。因此，當你擁有兩個兄弟路由節點配置時，你必須確認前一個路由不會匹配後一個路由中的路徑。

類比學習vue-router與koa-router

有待完善

頁面路由與服務端路由

有待完善