成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React Router基本用法

huhud / 1408人閱讀

摘要：本文同步自我的博客，歡迎移步前往，概覽本文基于版本。這樣的做法雖然看起來(lái)很簡(jiǎn)單，但是也增加了復(fù)雜性?？偨Y(jié)基本用法大概就這么多一個(gè)應(yīng)用往往是各種組件各種嵌套，搞明白了，就可以很輕松的玩轉(zhuǎn)路由。

本文同步自我的博客 Reeoo"s Blog，歡迎移步前往，^_^

概覽 
本文基于React Router v1.03版本。

React Router是一個(gè)為React設(shè)計(jì)的強(qiáng)大的路由庫(kù)?？梢詭椭覀兛焖俚膶?shí)現(xiàn)路由功能，包括URL和React components之間的同步映射關(guān)系。
在解釋React Router如何使用之前，我們先來(lái)看看在不使用React Router的情況下，是怎么樣的，接下來(lái)的所有例子中都將使用ES2015語(yǔ)法和語(yǔ)言特性。

不使用React Router 
import React from "react"
import { render } from "react-dom"

const About = React.createClass({/*...*/})
const Inbox = React.createClass({/*...*/})
const Home = React.createClass({/*...*/})

const App = React.createClass({
getInitialState() {
  return {
    route: window.location.hash.substr(1)
  }
},

componentDidMount() {
  window.addEventListener("hashchange", () => {
    this.setState({
      route: window.location.hash.substr(1)
    })
  })
},

render() {
  let Child
  switch (this.state.route) {
    case "/about": Child = About; break;
    case "/inbox": Child = Inbox; break;
    default:      Child = Home;
  }

  return (
    

      
App

      
      
    

  )
}
})

render(, document.body)

當(dāng)hash值變化的時(shí)候，App 將會(huì)根據(jù)this.state.route 的值決定渲染哪個(gè)組件（About、Index、Home）到頁(yè)面上。這樣的做法雖然看起來(lái)很簡(jiǎn)單，但是也增加了復(fù)雜性。

想象一下，如果組件 Inbox 有一些嵌套的子組件，它們的路由規(guī)則可能是這樣的：/inbox/message/12345 或者 /inbox/unread 這樣的，
上面的路由匹配規(guī)則很顯然就不能滿足我們的需求了，我們不得不修改之前的URL解析規(guī)則，寫(xiě)一堆復(fù)雜的代碼來(lái)判斷哪種URL應(yīng)該呈現(xiàn)哪個(gè)組件（比如：App -> About, App -> Inbox -> Messages -> Message, App -> Inbox -> Messages -> Stats）。

使用React Router

首先，引入React Router

import React from "react"
import { render } from "react-dom"
import { Router, Route, Link } from "react-router"

把判斷路由邏輯的那段代碼刪除，然后加入Link標(biāo)簽

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

        
App

        {/* 把`a`標(biāo)簽換成`Link`標(biāo)簽 */}
        
    
          
  • About
    • 
          
  • Inbox
    • 
        


        {/*
          把``替換成`this.props.children`
          路由會(huì)渲染正確的組件
        */}
        {this.props.children}
      

    )
  }
})

最后引入和，由它們幫我們搞定路由。

render((
  
    
      
      
    
  
), document.body)

React Router知道哪種URL規(guī)則下，渲染哪個(gè)組件到頁(yè)面上，不需要我們自己在做任何的判斷。
例如：/about這種URL規(guī)則，會(huì)被構(gòu)建成
在React Router內(nèi)部，會(huì)把標(biāo)簽層級(jí)轉(zhuǎn)換成路由配置。如果你不喜歡jsx的這種寫(xiě)法，也可以使用對(duì)象的形式：

const routes = {
  path: "/",
  component: App,
  childRoutes: [
    { path: "about", component: About },
    { path: "inbox", component: Inbox },
  ]
}

render(, document.body)
添加更多的視圖

OK，現(xiàn)在在inbox路由下嵌套一個(gè)messages子路由，
首先需要添加一個(gè)新的Message組件：

const Message = React.createClass({
  render() {
    return 
Message

  }
})

然后在原有的inbox路由下面為 Message 組件添加新的路由，這樣就可以得到嵌套的組件。

const Inbox = React.createClass({
  render() {
    return (
      

        
Inbox

        {/* 渲染子組件 */}
        {this.props.children}
      

    )
  }
})

render((
  
    
      
      
        {/* 在這里加入要嵌套的視圖 */}
        {/* render the stats page when at `/inbox` */}
        
        {/* 渲染message組件  /inbox/messages/123 */}
        
      
    
  
), document.body)

訪問(wèn)inbox/messages/12345會(huì)匹配新加的路由，App->Inbox->Message,路由層級(jí)：

訪問(wèn)/inbox，路由層級(jí)：
獲取參數(shù)

當(dāng)我們?cè)L問(wèn)inbox/messages/12345的時(shí)候，我們需要獲取到相應(yīng)的參數(shù)，然后從服務(wù)器獲取對(duì)應(yīng)的數(shù)據(jù)。當(dāng)視圖渲染的時(shí)候，路由組件會(huì)注入一些有用的屬性到組件上，特別是一些從URL動(dòng)態(tài)獲取的參數(shù)信息，在我們這個(gè)示例里是：id

const Message = React.createClass({

  componentDidMount() {
    // from the path `/inbox/messages/:id`
    const id = this.props.params.id

    fetchMessage(id, function (err, message) {
      this.setState({ message: message })
    })
  },

  // ...

})

你也可以通過(guò)查詢串來(lái)獲取參數(shù)，假如我們?cè)跒g覽器里面訪問(wèn)/foo?bar=baz這個(gè)路由,在你的組件中可以通過(guò)this.props.location.query.bar獲取bar的值baz。

總結(jié)

React Router基本用法大概就這么多,一個(gè)應(yīng)用往往是各種組件各種嵌套，搞明白了React Router，就可以很輕松的玩轉(zhuǎn)路由。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/91586.html

相關(guān)文章

  • react-router @4用法整理

    摘要：官方文檔源碼這篇文章主要介紹了的基本用法包括動(dòng)態(tài)路由編程式導(dǎo)航等安裝用法動(dòng)態(tài)路由的基本用法編程式導(dǎo)航總結(jié)安裝用法示例代碼關(guān)于路由重定向使用的格式注意位置需要在定義路由的后面比如重定向就需要寫(xiě)在后面關(guān)于路由匹配默認(rèn)寫(xiě)在路由末尾前 router@4 react-router@4官方文檔 github源碼 這篇文章主要介紹了react-router@4的基本用法,包括動(dòng)態(tài)路由,編程式...

    piglei 評(píng)論0 收藏0

  • react-router-dom v^4學(xué)習(xí)歷程（一）

    摘要：用于精準(zhǔn)匹配路徑，不用也會(huì)匹配到匹配的路徑的子路徑，這樣兩個(gè)路由組件都會(huì)顯示。路徑中傳遞參數(shù)到路由到的組件，就是在路徑前面加上這樣這個(gè)路由地址就會(huì)變成一個(gè)參數(shù)被組件接受到。例如可以獲取到當(dāng)前的基礎(chǔ)路徑。 react-router-dom的版本已經(jīng)更新到了4.1.1，那么我們就一起來(lái)學(xué)習(xí)學(xué)習(xí)react v4這個(gè)新版路由的基本使用吧！ 在學(xué)習(xí)路由之前我們先需要復(fù)習(xí)幾個(gè)基礎(chǔ)知識(shí)，關(guān)于reac...

    KevinYan 評(píng)論0 收藏0

  • React Router 使用教程(阮一峰)

    摘要：它是官方維護(hù)的，事實(shí)上也是唯一可選的路由庫(kù)。表示的這個(gè)部分是可選的。另一種做法是，使用指定當(dāng)前路由的。而組件會(huì)使用路徑的精確匹配。否則用戶直接向服務(wù)器請(qǐng)求某個(gè)子路由，會(huì)顯示網(wǎng)頁(yè)找不到的錯(cuò)誤。 真正學(xué)會(huì) React 是一個(gè)漫長(zhǎng)的過(guò)程。 你會(huì)發(fā)現(xiàn)，它不是一個(gè)庫(kù)，也不是一個(gè)框架，而是一個(gè)龐大的體系。想要發(fā)揮它的威力，整個(gè)技術(shù)棧都要配合它改造。你要學(xué)習(xí)一整套解決方案，從后端到前端，都是全新的做...

    Yang_River 評(píng)論0 收藏0

  • React-Redux的用法

    摘要：基本流程組件只接受數(shù)據(jù)包括出來(lái)的數(shù)據(jù)以及方法容器組件通過(guò)將返回的作為傳入通過(guò)將作為傳入通過(guò)方法將這兩個(gè)方法與組件連接起來(lái)返回一個(gè)容器組件組件將所有組件分成兩大類組件和容器組件組件有以下幾個(gè)特征只負(fù)責(zé)的呈現(xiàn)不帶有任何業(yè)務(wù)邏輯沒(méi)有狀態(tài)即不 基本流程 1.UI組件Example,只接受this.props數(shù)據(jù),包括reducer出來(lái)的數(shù)據(jù)state,以及dispatch方法.2.容器組件co...

    leap_frog 評(píng)論0 收藏0

  • React Native 常用的 15 個(gè)庫(kù)

    摘要：聲明式用法只需使用動(dòng)畫(huà)的名稱，該動(dòng)畫(huà)將在加載該元素時(shí)立即生效。實(shí)際案例這個(gè)庫(kù)支持本地推送通知功能比較全面。實(shí)際案例具有縮放支持，回調(diào)，縮放以適應(yīng)和滾動(dòng)指示器支持的組件。這是圖像上傳或圖像處理的基本庫(kù)。 本篇 React native 庫(kù)列表不是從網(wǎng)上隨便找的， 這些是我在我的應(yīng)用中親自使用的庫(kù)。 這些庫(kù)功能可能跟其它庫(kù)也有，但經(jīng)過(guò)大量研究并在我的程序中嘗試后，我選擇了這些庫(kù)。 想閱讀更...

    Juven 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<