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

資訊專欄INFORMATION COLUMN

Router入門0x203: react、react-route、react-route-dom

luxixing / 3357人閱讀

摘要：概述上一章使用的是自己實(shí)現(xiàn)的，當(dāng)然已經(jīng)有現(xiàn)成的庫(kù)給我們用了，那就是?？偨Y(jié)看透它，然后掌握它資源源碼

0x000 概述

上一章使用的是自己實(shí)現(xiàn)的route，當(dāng)然已經(jīng)有現(xiàn)成的庫(kù)給我們用了，那就是react-route。

0x001 history Api說(shuō)明

在說(shuō)這個(gè)庫(kù)之前，得先對(duì)history新的api做一個(gè)了解

window.history.pushState(data,title,?url)

data：數(shù)據(jù)

title：標(biāo)題

url：地址

當(dāng)我們調(diào)用該函數(shù)的時(shí)候，將改變地址欄的地址，但是卻不會(huì)導(dǎo)致頁(yè)面重新去后臺(tái)獲取，如下圖操作，在第一次初始化完成之后，我們依次調(diào)用

window.history.pushState({name:"a"},"","a")
window.history.pushState({name:"b"},"","b")
window.history.pushState({name:"c"},"","c")
window.history.pushState({name:"d"},"","d")

將會(huì)看到地址欄分別變成了：

https://github.com/a
https://github.com/b
https://github.com/c
https://github.com/d

但是網(wǎng)絡(luò)請(qǐng)求卻沒有發(fā)出

window.history.state：該變量可以獲取到跳轉(zhuǎn)當(dāng)前所處state時(shí)傳入的data:

window.onpopstate：這是一個(gè)事件，可以設(shè)置監(jiān)聽器，監(jiān)聽狀態(tài)被pop出來(lái)的時(shí)候的事件，其中go、back會(huì)觸發(fā)該事件

總結(jié)
根據(jù)以上幾個(gè)特性，就可以和上一章一樣，做出一個(gè)基于history模式的路由庫(kù)了

0x002 history庫(kù)說(shuō)明

history是一個(gè)針對(duì)該特性封裝的庫(kù)，以下是示例代碼

import createHistory from "history/createBrowserHistory"

const history = createHistory()

// 監(jiān)聽 location 的變化
const unlisten = history.listen((location, action) => {
    // location is an object like window.location
    console.log(action, location.pathname, location.state)
})
// 修改 location
history.push("/home", { some: "state" })
// 取消監(jiān)聽
unlisten()

查看瀏覽器

0x003 react-route 
react-route+history+react就可以形成一個(gè)套餐了

源碼

import React from "react"
import ReactDom from "react-dom"
import { Router, Route, Switch,withRouter } from "react-router"
import createHistory from "history/createBrowserHistory"

class App extends React.Component{
    render(){
        console.log(this)
        return(
            

                

                    
                    
                    
                

                

                
                    ({render:()=>
首頁(yè)
})}>
                    ({render:()=>
文章
})}>
                    ({render:()=>
我的
})}>
                
            

        )
    }
}

const history = createHistory()

let MyApp=withRouter(App)

ReactDom.render(
    
        
    ,
    document.getElementById("app")
)

效果

說(shuō)明

App組件說(shuō)明
App組件是跟組件，所有的組件都掛載在這個(gè)組件之下，在這個(gè)組件中，使用了兩個(gè)react-route的組件，一個(gè)是Switch，用來(lái)在路由變化的時(shí)候切換顯示的路由；一個(gè)是Route組件，一個(gè)Route代表一個(gè)頁(yè)面，也代表一個(gè)組件，這里用了三個(gè)Route,每個(gè)Route對(duì)應(yīng)一個(gè)路由，也對(duì)應(yīng)一個(gè)組件，這里的組件為了方便，直接用匿名函數(shù)實(shí)現(xiàn)，分別是：

()=>({render:()=>
首頁(yè)
}) // 對(duì)應(yīng)`/index`
()=>({render:()=>
文章
}) // 對(duì)應(yīng)`/article`
()=>({render:()=>
我的
}) // 對(duì)應(yīng)`/mine`

當(dāng)我們點(diǎn)擊相應(yīng)的按鈕的時(shí)候，將會(huì)調(diào)用this.props.history.push("${path}")來(lái)跳轉(zhuǎn)到對(duì)應(yīng)的頁(yè)面，其中${path}是我們?cè)O(shè)置的Route組件的path屬性。

history
通過history庫(kù)來(lái)做location監(jiān)聽和跳轉(zhuǎn)

withRoute是一個(gè)HOC，為App組件注入了history對(duì)象和路由相關(guān)的屬性，這樣可以屏蔽路由的存在，將App組件變成一個(gè)純粹的組件

Router組件接管了histoy對(duì)象，在該組件中完成了history的監(jiān)聽和路由的渲染

0x004 react-route-dom 
上面的調(diào)用太復(fù)雜了，需要手動(dòng)創(chuàng)建history、調(diào)用this.props.history.push("/index")跳轉(zhuǎn)，那有沒有簡(jiǎn)單點(diǎn)的呢？那就是react-router-dom，這個(gè)庫(kù)封裝了react-route、history庫(kù)，并提供了幾個(gè)實(shí)用的組件

源碼

import React from "react"
import ReactDom from "react-dom"
import {BrowserRouter, Switch, Route, Link, withRouter} from "react-router-dom"

class App extends React.Component {
    render() {
        return (
            

                

                    首頁(yè)
                    文章
                    我的
                

                

                
                     ({render: () => 
首頁(yè)
})}>
                     ({render: () => 
文章
})}>
                     ({render: () => 
我的
})}>
                
            

        )
    }
}

let MyApp = withRouter(App)


ReactDom.render(
    
        
    ,
    document.getElementById("app")
)

說(shuō)明：

使用BrowserRouter替代Router，并且不再手動(dòng)創(chuàng)建history

使用Link直接跳轉(zhuǎn)

該庫(kù)是在react-route和history庫(kù)的基礎(chǔ)之上封裝的，只是為了在dom環(huán)境下快速調(diào)用，并且提供了一個(gè)更加實(shí)用的組件而已，不能應(yīng)為這個(gè)庫(kù)而忘記了本質(zhì)。

0x005 總結(jié)

看透它，然后掌握它

0x006 資源

源碼

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

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

相關(guān)文章

  • Router入門0x202: 自己實(shí)現(xiàn) Router 頁(yè)面調(diào)度和特定頁(yè)面訪問

    摘要：概述上一章講了如何實(shí)現(xiàn)組件頁(yè)面切換，這一章講如何解決上一章出現(xiàn)的問題以及如何優(yōu)雅的實(shí)現(xiàn)頁(yè)面切換。在中監(jiān)聽了事件，這樣就可以在變化的時(shí)候，需要路由配置并調(diào)用。 0x000 概述 上一章講了SPA如何實(shí)現(xiàn)組件/頁(yè)面切換，這一章講如何解決上一章出現(xiàn)的問題以及如何優(yōu)雅的實(shí)現(xiàn)頁(yè)面切換。 0x001 問題分析 回顧一下上一章講的頁(yè)面切換，我們通過LeactDom.render(new Articl...

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

  • Router入門0x205: react-route + redux + react 集成

    摘要：概述這一章終于大集成了集成源碼效果說(shuō)明集成主要是用到庫(kù)集成源碼效果說(shuō)明主要用到庫(kù)，是針對(duì)庫(kù)在環(huán)境下的封裝組件，注入等屬性接管跟組件指定路由和組件的對(duì)應(yīng)關(guān)系集成源碼引入相關(guān)的包和鏈接組件效果說(shuō)明主要用到庫(kù)都是用的接 0x000 概述 這一章終于大集成了 0x001 集成react 源碼 import React from react import ReactDom from rea...

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

  • Router入門0x204: react-route簡(jiǎn)單栗子

    摘要：概述這一章仔細(xì)講一講的使用栗子簡(jiǎn)單使用源碼簡(jiǎn)單使用首頁(yè)文章我的首頁(yè)文章我的效果帶導(dǎo)航激活效果源碼帶導(dǎo)航效果首頁(yè)文章我的首頁(yè)文章我的效果說(shuō)明增強(qiáng)版，如果當(dāng)前路由命中，將會(huì)啟用或者。 0x000 概述 這一章仔細(xì)講一講 react-route 的使用栗子 0x001 簡(jiǎn)單使用 源碼 import React from react import ReactDom from react-d...

    番茄西紅柿 評(píng)論0 收藏0

  • 手挽手帶你學(xué)React：三檔 React-router4.x的使用

    摘要：我們?cè)趦?nèi)部來(lái)渲染不同的組件我們這里采用哈希路由的方式，鑒于的渲染機(jī)制，我們需要把值綁定進(jìn)入內(nèi)部。 手挽手帶你學(xué)React入門三檔,帶你學(xué)會(huì)使用Reacr-router4.x,開始創(chuàng)建屬于你的React項(xiàng)目 什么是React-router React Router 是一個(gè)基于 React 之上的強(qiáng)大路由庫(kù)，它可以讓你向應(yīng)用中快速地添加視圖和數(shù)據(jù)流，同時(shí)保持頁(yè)面與 URL 間的同步。通俗一...

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

  • React 入門實(shí)踐

    摘要：更多相關(guān)介紹請(qǐng)看這特點(diǎn)僅僅只是虛擬最大限度減少與的交互類似于使用操作單向數(shù)據(jù)流很大程度減少了重復(fù)代碼的使用組件化可組合一個(gè)組件易于和其它組件一起使用，或者嵌套在另一個(gè)組件內(nèi)部。在使用后，就變得很容易維護(hù)，而且數(shù)據(jù)流非常清晰，容易解決遇到的。 歡迎移步我的博客閱讀：《React 入門實(shí)踐》 在寫這篇文章之前，我已經(jīng)接觸 React 有大半年了。在初步學(xué)習(xí) React 之后就正式應(yīng)用到項(xiàng)...

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

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

0條評(píng)論

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