亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

React Router基本用法

huhud / 1465人閱讀

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

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

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

React Router是一個為React設(shè)計的強大的路由庫。可以幫助我們快速的實現(xiàn)路由功能，包括URL和React components之間的同步映射關(guān)系。
在解釋React Router如何使用之前，我們先來看看在不使用React Router的情況下，是怎么樣的，接下來的所有例子中都將使用ES2015語法和語言特性。

不使用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值變化的時候，App 將會根據(jù)this.state.route 的值決定渲染哪個組件（About、Index、Home）到頁面上。這樣的做法雖然看起來很簡單，但是也增加了復(fù)雜性。

想象一下，如果組件 Inbox 有一些嵌套的子組件，它們的路由規(guī)則可能是這樣的：/inbox/message/12345 或者 /inbox/unread 這樣的，
上面的路由匹配規(guī)則很顯然就不能滿足我們的需求了，我們不得不修改之前的URL解析規(guī)則，寫一堆復(fù)雜的代碼來判斷哪種URL應(yīng)該呈現(xiàn)哪個組件（比如：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`
          路由會渲染正確的組件
        */}
        {this.props.children}
      

    )
  }
})

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

render((
  
    
      
      
    
  
), document.body)

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

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

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

OK，現(xiàn)在在inbox路由下嵌套一個messages子路由，
首先需要添加一個新的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)

訪問inbox/messages/12345會匹配新加的路由，App->Inbox->Message,路由層級：

訪問/inbox，路由層級：
獲取參數(shù)

當(dāng)我們訪問inbox/messages/12345的時候，我們需要獲取到相應(yīng)的參數(shù)，然后從服務(wù)器獲取對應(yīng)的數(shù)據(jù)。當(dāng)視圖渲染的時候，路由組件會注入一些有用的屬性到組件上，特別是一些從URL動態(tài)獲取的參數(shù)信息，在我們這個示例里是：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 })
    })
  },

  // ...

})

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

總結(jié)

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/91586.html

相關(guān)文章

  • react-router @4用法整理

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

    piglei 評論0 收藏0

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

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

    KevinYan 評論0 收藏0

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

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

    Yang_River 評論0 收藏0

  • React-Redux的用法

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

    leap_frog 評論0 收藏0

  • React Native 常用的 15 個庫

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

    Juven 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<