Router入門0 x 203:react、react-route、react-route-dom

5026 ワード

react-router react.js javascript

0 x 000の概要
前の章は自分で実現したrouteを使っています.もちろん既存の在庫があります.それはreact-routeです.
0 x 001 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モードに基づくルーティングライブラリを作成することができます.
0 x 002 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()

ブラウザを表示
0 x 003 react-routereact-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は、すべてのコンポーネントがこの構成要素の下にマウントされており、この構成要素では、2つのreact-routeのコンポーネントが使用されており、1つはSwitchであり、ルーティングが変化するときに表示されるルーティングを切り替えるために使用される.一つはRouteコンポーネントで、一つはRouteページを表し、一つは一つのコンポーネントを表しています.ここでは三つのRouteを使っています.各Routeは一つのルートに対応しています.ここでは一つのコンポーネントにも対応しています.ここでは便利のために直接に匿名関数で実現します.this.props.history.push('${path}')を呼び出して対応するページにジャンプします.${path}は私たちが設定したRouteコンポーネントのpath属性です.

historyはhistoryライブラリを通じてlocationを傍受し、

にジャンプします.

withRouteは、HOCのコンポーネントにAppのオブジェクトとルーティングに関する属性を注入したhistoryであり、ルーティングの存在をブロックし、Appのコンポーネントを純粋なコンポーネント

に変化させることができる.

Routerコンポーネントは、histoyオブジェクトを引き継ぎ、historyの傍受およびルーティングのレンダリング

が完了した.
0 x 004 react-route-dom
上のコールは複雑すぎて、手動で作成する必要があります.history、呼び出しthis.props.history.push('/index')ジャンプは簡単なものがありますか?それはreact-router-domです.このライブラリは封入されました.react-route、historyライブラリは、いくつかの実用的なコンポーネントを提供しています.

ソースコード

()=>({render:()=>  }) //   `/index`
()=>({render:()=>  }) //   `/article`
()=>({render:()=>  
}) //   `/mine`

説明:

はBrowserRouterを使用してRouterの代わりにし、history

を手動で作成しない.

Linkを使用して直接ジャンプ

ライブラリは、react-routeおよびhistoryライブラリに基づいてカプセル化されており、dom環境での急速な呼び出しのために、より実用的なコンポーネントを提供するだけで、このライブラリのために本質を忘れてはならない.

0 x 005まとめ
それをよく見て把握します.
0 x 006リソース

ソースコード

ES 6配列拡張flatを追加しました.