Reactjs系列四react-router（上）

前言

在開發spa項目中，前端路由是一個沒法繞開的技術，在整個spa前端架構中我覺的掌握前端路由配置，狀態管理以及異步請求的封裝是最基本的能力。本文主要介紹react-router對於react項目的做用，以及基本配置。 注：本文主要以react-router v4爲基礎 簡單的介紹下

reactjs路由做用

React Router 是完整的 React 路由解決方案。他知足了reactjs項目對於路由的大部分 需求，特色以下：

• 有簡單的 API 與強大的功能
• 實現代碼緩衝加載
• 動態路由匹配
• 路由導航（路由攔截）
• 以及創建正確的位置過渡處理。

react router詳解

reacter-router v3.x

路由結構組成

• 路由組件：Router
• 路由匹配組件：Route
• 路由導航組件：Link

主要api詳解

• Router: 能保持 UI 和 URL 的同步，其主要屬性children/routes是指一個或多個的 Route 或 PlainRoute

<Router routes={...}>
   ...
</Router>
複製代碼

• Route: 聲明路由映射到應用的組件層，其path屬性用來直接路由，component用來匹配URL時的組件也能夠用components匹配多個組件

<Route path="/route" component={App}></Route>
複製代碼

• IndexRoute: 爲父 route 提供一個默認的 "child"
• IndexRedirect: 從一個父 route 的 URL 重定向到其餘 route
• Link:以適當的 href 去渲染一個可訪問的錨標籤。

<Link to={`/users/list`} activeClassName="active">{user.name}</Link>

複製代碼

• browserHistory： 用來實現組件的外部跳轉

import { browserHistory } from 'react-router'
  browserHistory.push('/path')
複製代碼

• onEnter（進入）和 onLeave（離開） 在頁面跳轉確認時觸發一次

//replaceState控制路由跳轉
         onEnter: function (nextState, replaceState) {
              replaceState(null, '...')
            }
複製代碼

基本配置

• 嵌套型語法實現

import React from 'react'
import { Router, Route, Link } from 'react-router'
import BasicLayout from './components/BasicLayout'

React.render((
  <Router>
    <Route path="/" component={BasicLayout}>
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
        <Route path="children/:id" component={Children2} />
      </Route>
    </Route>
  </Router>
), document.body)
複製代碼

//基礎頁面組件

const BasicLayout = React.createClass({
  render() {
    return (
      <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/inbox">Inbox</Link></li>
        </ul>
        {this.props.children}
      </div>
    )
  }
})
複製代碼

• 原生數組對象配置實現

const routes = [
  { 
    //路由對應的路徑
    path: '/',
    //渲染的組件
    component: App,
    indexRoute: { component: Dashboard },
    //路由攔截
    onEnter: function (nextState, replaceState) {
              replaceState(null, '...')
            }
    // 子路由
    childRoutes: [
      //同父路由配置文件
      { path: 'about', component: About },
      { path: 'inbox',
        component: Inbox,
        childRoutes: [
          //同父路由配置文件
          { path: '/messages/:id', component: Message },
          { path: 'messages/:id',
            onEnter: function (nextState, replaceState) {
              replaceState(null, '/messages/' + nextState.params.id)
            }
          }
        ]
      }
    ]
  }
]

React.render(<Router routes={routes} />, document.body)
複製代碼

react-router ~v4.x

路由結構組成

• 路由組件:BrowserRouter和HashRouter
• 路由匹配組件:Switch 和 Route
• 路由導航組件:Link

主要api詳解

• BrowserRouter和HashRouter兩種路由模式跟router3中的history 和 hash一個意思

import {
  BrowserRouter as Router
} from "react-router-dom";

export default function BasicExample() {
  return (
  <Router>
   .....
  </Router>
  )}
複製代碼

• Switch 渲染第一個被location匹配到的而且做爲子元素的或者

<Switch>
    /
    
     <Route exact path="/">
      <Home />
     </Route>
 </Switch>
複製代碼

• Route 官方文檔給出 Its most basic responsibility is to render some UI when its path matches the current URL。即子組件會被渲染到 注：V4 中的 routes 默認是 inclusive 的，這就意味着多個 能夠同時匹配 和呈現，若是隻匹配一個則須要用switch來實現。

<Route exact path="/">
      <Home />
     </Route>
複製代碼

• Link:提供應用程序周圍的聲明式、可訪問的導航。

基本配置

...待續

react-router v3和v4對比

v3：路由是配置處理

• 路由集中在一處；
• 佈局和頁面的層疊由層疊的 組件控制；
• 佈局和頁面組件是路由的一部分

～v4：只是組件

• 分佈式路由管理
• 匹配原則：包容性和排他性
• 路由存在佈局和ui之間
• 適配了移動應用端

總結

對於spa爲基礎的項目前端路由是必備功能之一，在react-router中v4以後和v4以後的版本差距是比較大的，若是以前沒接觸過react用的是vue，建議先使用v4以前的版本，由於他與vue-router的路由定義基本相同，都是集中管理，這樣你上手react項目會很快。若是一直用react開發而且用的是v4以前建議嘗試下v4，剛開始會很難接受，以後你會有意想不到的驚喜。