溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

詳解前端路由實現與react-router使用姿勢

發布時間:2020-10-15 06:03:32 來源:腳本之家 閱讀:389 作者:Gavin13140 欄目:web開發

路由

對于有過SPA開發經驗的人來說,路由這個名詞并不陌生,前端的路由和后端的路由在實現技術上不一樣,但是原理都是一樣的。在 HTML5 的 history API 出現之前,前端的路由都是通過 hash 來實現的,hash 能兼容低版本的瀏覽器。它的 URI 規則中需要帶上 #。Web 服務并不會解析 hash,也就是說 # 后的內容 Web 服務都會自動忽略,但是 JavaScript 是可以通過 window.location.hash 讀取到的,讀取到路徑加以解析之后就可以響應不同路徑的邏輯處理。

簡單介紹AngularJs UI-Router路由

如果你有過AngularJS開發經驗,#并不陌生,angularjs有自己官方實現的路由體系,也有比較具有代表性的第三方嵌套路由機制UI-Router; 如下代碼塊所示:

.state("main.list",angularAMD.route({
    url : '/list/:params',//url &參數
    views : {
      "header@main" : angularAMD.route({
        templateUrl : 'simple/view/main/html/main/Header.html',
        controller:'HeadController',
        controllerUrl:[ ****.js
                  ]
      }),
      "menu@main" : angularAMD.route({
        templateUrl : 'simple/view/main/html/main/MenuModule.html',
        controller : "MenuController",
        controllerUrl:[ ****.js]
      }),
      "mainContent@main":angularAMD.route({
        templateUrl : 'simple/view/main/html/main/MainContent.html'
      })
    }
  }))

state()函數的第一個參數就是路由,“main.list” 是一個嵌套路由機制,當頁面跳轉到 “main.list”路由下時會先加載 state(“main”,*)下的模塊及其資源(html,js等),隨后加載state(”main.list”)下的模塊和資源(html,js等),實現路由嵌套;

react-router

-先上一段代碼

<Router history={ hashHistory }>
  <Route path='/' component={CoreLayout}>
  <IndexRoute component={HomeView}/>
  <Route path=”/HODE_ROUTE/:param“ component={HomeView}/>
  <Route path=“ /AUDIT_ROUTE/:param" component={AuditView}/>
  <Route path=“/CHART_ROUTE” component={ChartView}/>
  </Route>
</Router>

React-router以jsx語法類似于DOM結構的形式實現router嵌套;與AngularJs 的UI-Router看似差別很大,實則思想雷同;

Angular的實現邏輯:

跳轉=》state=》module=》靜態資源(js,css,html)=》show(頁面展示)

react-router的實現邏輯:

跳轉=》path=》component=》靜態資源(js,css,html)=》show(頁面展示)
本文主要講react-router,下面簡單介紹react-router的使用姿勢:

react-router常用組件入門

嵌套路由

<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>

子路由也可以不寫在Router組件里面,單獨傳入Router組件的routes屬性

let routes = <Route path="/" component={App}>
 <Route path="/repos" component={Repos}/>
 <Route path="/about" component={About}/>
</Route>;

<Router routes={routes} history={browserHistory}/>

path 屬性

Route組件的path屬性指定路由的匹配規則,看下面例子

<Route path="inbox" component={Inbox}>
  <Route path="messages/:id" component={Message} />
</Route>

上面代碼中,當用戶訪問/inbox/messages/:id時,會加載下面的組件。

<Inbox>
 <Message/>
</Inbox>

IndexRoute 組件

類似index.html ,默認加載組件,下面代碼默認加載home組件

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

現在,用戶訪問/的時候,加載的組件結構如下。

<App>
 <Home/>
</App>

Redirect 組件

Redirect組件用于路由的跳轉,即用戶訪問一個路由,會自動跳轉到另一個路由。

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

現在訪問/inbox/messages/5,會自動跳轉到/messages/5。

Link

Link組件用于取代a標簽,生成一個鏈接,允許用戶點擊后跳轉到另一個路由。它基本上就是a標簽的React 版本,可以接收Router的狀態。

表單處理

Link組件用于正常的用戶點擊跳轉,但是有時還需要表單跳轉、點擊按鈕跳轉等操作。這些情況怎么跟React Router對接呢?

第一種方法是使用browserHistory.push

 handleSubmit(event) {
  event.preventDefault()
  const userName = event.target.elements[0].value
  const repo = event.target.elements[1].value
  const path = `/repos/${userName}/${repo}`
  browserHistory.push(path)
 }

${userName} 一種后端語言常用的表達式寫法,可在字符串中取變量

 handleSubmit(event) {
  // ...
  this.context.router.push(path)
 },

第二種方法是使用context對象。

export default React.createClass({

 // ask for `router` from context
 contextTypes: {
  router: React.PropTypes.object
 },

 handleSubmit(event) {
  // ...
  this.context.router.push(path)
 },
})

多人協作開發router文件管理

一般一個項目都會有一個統一的router文件,相當于一個router池,不同的請求,請求router池中所匹配的路徑,加載請求所需頁面。 but 。。。 每個開發者開發一個組件都會需要配置路由,會導致router文件不易管理,容易導致沖突,甚至故障。 so。。,也許,可能可以每個組件文件夾下對于一個XXX.router 文件,前端代碼打包上傳到線上時觸發某個鉤子函數,將XXX.router文件統一合并到中央router文件中,從而避免多人操作router文件。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女