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

luxixing 發布于2019-08-23 12:15 / 3349人閱讀

摘要：概述上一章使用的是自己實現的，當然已經有現成的庫給我們用了，那就是。總結看透它，然后掌握它資源源碼

0x000 概述

上一章使用的是自己實現的route，當然已經有現成的庫給我們用了，那就是react-route。

0x001 history Api說明

在說這個庫之前，得先對history新的api做一個了解

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

data：數據

title：標題

url：地址

當我們調用該函數的時候，將改變地址欄的地址，但是卻不會導致頁面重新去后臺獲取，如下圖操作，在第一次初始化完成之后，我們依次調用

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

將會看到地址欄分別變成了：

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

但是網絡請求卻沒有發出

window.history.state：該變量可以獲取到跳轉當前所處state時傳入的data:

window.onpopstate：這是一個事件，可以設置監聽器，監聽狀態被pop出來的時候的事件，其中go、back會觸發該事件

總結
根據以上幾個特性，就可以和上一章一樣，做出一個基于history模式的路由庫了

0x002 history庫說明

history是一個針對該特性封裝的庫，以下是示例代碼

import createHistory from "history/createBrowserHistory"

const history = createHistory()

// 監聽 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" })
// 取消監聽
unlisten()

查看瀏覽器

0x003 react-route

react-route+history+react就可以形成一個套餐了

源碼

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:()=>首頁
})}>
                    ({render:()=>文章
})}>
                    ({render:()=>我的
})}>
                
            
        )
    }
}

const history = createHistory()

let MyApp=withRouter(App)

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

效果

說明

App組件說明
App組件是跟組件，所有的組件都掛載在這個組件之下，在這個組件中，使用了兩個react-route的組件，一個是Switch，用來在路由變化的時候切換顯示的路由；一個是Route組件，一個Route代表一個頁面，也代表一個組件，這里用了三個Route,每個Route對應一個路由，也對應一個組件，這里的組件為了方便，直接用匿名函數實現，分別是：

()=>({render:()=>首頁}) // 對應`/index`
()=>({render:()=>文章}) // 對應`/article`
()=>({render:()=>我的
}) // 對應`/mine`

當我們點擊相應的按鈕的時候，將會調用this.props.history.push("${path}")來跳轉到對應的頁面，其中${path}是我們設置的Route組件的path屬性。

history
通過history庫來做location監聽和跳轉

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

Router組件接管了histoy對象，在該組件中完成了history的監聽和路由的渲染

0x004 react-route-dom

上面的調用太復雜了，需要手動創建history、調用this.props.history.push("/index")跳轉，那有沒有簡單點的呢？那就是react-router-dom，這個庫封裝了react-route、history庫，并提供了幾個實用的組件

源碼

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 (
            
                
                    首頁
                    文章
                    我的
                
                
                
                     ({render: () => 首頁
})}>
                     ({render: () => 文章
})}>
                     ({render: () => 我的
})}>
                
            
        )
    }
}

let MyApp = withRouter(App)


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

說明：

使用BrowserRouter替代Router，并且不再手動創建history

使用Link直接跳轉

該庫是在react-route和history庫的基礎之上封裝的，只是為了在dom環境下快速調用，并且提供了一個更加實用的組件而已，不能應為這個庫而忘記了本質。

0x005 總結

看透它，然后掌握它

0x006 資源

源碼

GPU云服務器云服務器 react-router react-router4 react router cdn react-router-redux

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98187.html

Router入門0x202: 自己實現 Router 頁面調度和特定頁面訪問

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

dance 2019-08-23 12:10 評論0 收藏0
Router入門0x205: react-route + redux + react 集成

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

yiliang 2019-08-23 12:16 評論0 收藏0
Router入門0x204: react-route簡單栗子

摘要：概述這一章仔細講一講的使用栗子簡單使用源碼簡單使用首頁文章我的首頁文章我的效果帶導航激活效果源碼帶導航效果首頁文章我的首頁文章我的效果說明增強版，如果當前路由命中，將會啟用或者。 0x000 概述這一章仔細講一講 react-route 的使用栗子 0x001 簡單使用源碼 import React from react import ReactDom from react-d...

番茄西紅柿 2019-08-23 12:16 評論0 收藏0
手挽手帶你學React：三檔 React-router4.x的使用

摘要：我們在內部來渲染不同的組件我們這里采用哈希路由的方式，鑒于的渲染機制，我們需要把值綁定進入內部。手挽手帶你學React入門三檔,帶你學會使用Reacr-router4.x,開始創建屬于你的React項目什么是React-router React Router 是一個基于 React 之上的強大路由庫，它可以讓你向應用中快速地添加視圖和數據流，同時保持頁面與 URL 間的同步。通俗一...

SunZhaopeng 2019-08-23 15:11 評論0 收藏0
React 入門實踐

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

shenhualong 2019-08-19 17:47 評論0 收藏0