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

資訊專欄INFORMATION COLUMN

reactRouter V4 的使用

clasnake / 1949人閱讀

摘要：這是關(guān)于自己對版本學(xué)習(xí)理解做的這里獻(xiàn)上官方文檔參考死循環(huán)之自己引用自己組件解釋創(chuàng)建創(chuàng)建路由顯示什么組件顯示在什么位置它有三個用來定義渲染內(nèi)容將迭代所有子元素僅渲染與當(dāng)前位置匹配的第一個子元素當(dāng)沒有路徑與當(dāng)前位置匹配的時(shí)候就選擇沒有設(shè)置的組

這是關(guān)于自己對 REACT-router v4+ 版本學(xué)習(xí)理解做的dome

## 這里獻(xiàn)上git
## 官方文檔
## 參考
## react 死循環(huán)之自己引用自己.

組件解釋

BrowserRouter : 創(chuàng)建URL

 
 http://example.com/about

HashRouter: 創(chuàng)建URL

 
 http://example.com/#/about

Route : 路由顯示什么組件,顯示在什么位置,它有三個props用來定義渲染內(nèi)容:

component

render

children

switch : The is not required for grouping s, but it can be quite useful. A will iterate over all of its children elements and only render the first one that matches the current location. This helps when multiple route’s paths match the same pathname, when animating transitions between routes, and in identifying when no routes match the current location (so that you can render a “404” component).=>{

switch 將迭代所有route子元素,僅渲染與當(dāng)前位置匹配的第一個子元素.

當(dāng)沒有路徑與當(dāng)前位置匹配的時(shí)候就選擇沒有設(shè)置path props 的組件進(jìn)行渲染.(這樣的功能可以實(shí)現(xiàn)404的效果)

}

Link : a 鏈接作用, to 屬性不能少.

NavLink : 一個特殊版本，它將在與當(dāng)前URL匹配時(shí)為渲染元素添加樣式屬性。

Redirect : 當(dāng)被使用的時(shí)候,它會將當(dāng)前url導(dǎo)入他的to值指向的url組件.

dome筆記 路由器組件只能有一個子元素,子元素可以是HTML 元素div - 或反應(yīng)組件.

dome1 是關(guān)于基本的使用.

exact 作用的讓定義了這個props的組件僅在url等于path值的時(shí)候顯示.

match 在 this.props 中

dome2 是關(guān)于url參數(shù)的獲取.

圖片1 官方文檔說:可以使用正則表達(dá)式來控制應(yīng)匹配哪些參數(shù)值.

圖片2 參數(shù)可以使用正則表示式匹配,也就是說,只要當(dāng)參數(shù)為:asc 或者 desc 的時(shí)候 我們的組件ComponentWithRegex 才顯示, direction 可以隨時(shí)設(shè)置,這里并不是一個函數(shù).

dome3 理解 switch

switch 將迭代所有route子元素,僅渲染與當(dāng)前位置匹配的第一個子元素.

當(dāng)沒有路徑與當(dāng)前位置匹配的時(shí)候就選擇沒有設(shè)置path props 的組件進(jìn)行渲染.(這樣的功能可以實(shí)現(xiàn)404的效果)

重定向

自定義路由

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

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

相關(guān)文章

  • ReactRouter升級 v2 to v4

    摘要：概述相對于幾乎是重寫了新版的更偏向于組件化。汲取了很多思想，路由即是組件，使路由更具聲明式，且方便組合。如果你習(xí)慣使用，那么一定會很快上手新版的。被一分為三。不止是否有意義參考資料遷移到關(guān)注點(diǎn)官方文檔 概述 react-router V4 相對于react-router V2 or V3 幾乎是重寫了, 新版的react-router更偏向于組件化(everything is comp...

    JasonZhang 評論0 收藏0

  • NiceFish-React

    摘要：大漠窮秋于贈此筆名。是版本的實(shí)現(xiàn)，和版本保持風(fēng)格一致。碼云最有價(jià)值的開源項(xiàng)目這是版的實(shí)現(xiàn)，和版本保持風(fēng)格一致。采用版本，使用組件庫以及開發(fā)。已推薦這是的服務(wù)端代碼，基于。如果你需要與這個后端代碼進(jìn)行對接，請檢出本項(xiàng)目的分支。 你好，我是徐曉東，筆名燕云長風(fēng)。大漠窮秋于 2019-03-16 21:22 贈此筆名。 寓意：結(jié)合李白著名的邊塞詩《關(guān)山月》取【燕云長風(fēng)】—— 長風(fēng)幾萬里，吹...

    Terry_Tai 評論0 收藏0

  • 【進(jìn)階4-2期】Object.assign 原理及其實(shí)現(xiàn)

    摘要：木易楊注意原始類型被包裝為對象木易楊原始類型會被包裝，和會被忽略。木易楊原因在于時(shí)，其屬性描述符為不可寫，即。木易楊解決方法也很簡單，使用我們在進(jìn)階期中介紹的就可以了，使用如下。 引言 上篇文章介紹了賦值、淺拷貝和深拷貝，其中介紹了很多賦值和淺拷貝的相關(guān)知識以及兩者區(qū)別，限于篇幅只介紹了一種常用深拷貝方案。 本篇文章會先介紹淺拷貝 Object.assign 的實(shí)現(xiàn)原理，然后帶你手動實(shí)...

    layman 評論0 收藏0

  • webpack 構(gòu)建性能優(yōu)化策略小結(jié)

    摘要：但是，隨者工程開發(fā)的復(fù)雜程度和代碼規(guī)模不斷地增加，暴露出來的各種性能問題也愈發(fā)明顯，極大的影響著開發(fā)過程中的體驗(yàn)。對應(yīng)的資源也可以直接由頁面外鏈載入，有效地減小了資源包的體積。 背景 如今前端工程化的概念早已經(jīng)深入人心，選擇一款合適的編譯和資源管理工具已經(jīng)成為了所有前端工程中的標(biāo)配，而在諸多的構(gòu)建工具中，webpack以其豐富的功能和靈活的配置而深受業(yè)內(nèi)吹捧，逐步取代了grunt和gu...

    hiYoHoo 評論0 收藏0

  • FEDay 參會小記

    摘要：介紹微信風(fēng)格的，與客戶端體驗(yàn)一致，這個自己去微信上看吧，略。微信調(diào)試一件套，網(wǎng)頁授權(quán)模擬集成代理遠(yuǎn)程調(diào)試。這些在微信開發(fā)者中心有介紹，略。年微信開發(fā)經(jīng)驗(yàn)的人，終于又成為了零年開發(fā)經(jīng)驗(yàn)的人，重新走上了踩坑之路。 showImg(https://segmentfault.com/img/bVtEd1);活動地址：http://fequan.com/2016/ 注意：英文不好，小記也帶有自己...

    xcc3641 評論0 收藏0

發(fā)表評論

0條評論

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