reactRouter V4 的使用

clasnake 發布于2019-08-23 11:41 / 1941人閱讀

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

這是關于自己對 REACT-router v4+ 版本學習理解做的dome

## 這里獻上git
## 官方文檔
## 參考
## react 死循環之自己引用自己.

組件解釋

BrowserRouter : 創建URL

 
 http://example.com/about

HashRouter: 創建URL

 
 http://example.com/#/about

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

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子元素,僅渲染與當前位置匹配的第一個子元素.

當沒有路徑與當前位置匹配的時候就選擇沒有設置path props 的組件進行渲染.(這樣的功能可以實現404的效果)

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

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

Redirect : 當被使用的時候,它會將當前url導入他的to值指向的url組件.

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

dome1 是關于基本的使用.

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

match 在 this.props 中

dome2 是關于url參數的獲取.

官方文檔說:可以使用正則表達式來控制應匹配哪些參數值.

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

dome3 理解 switch

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

當沒有路徑與當前位置匹配的時候就選擇沒有設置path props 的組件進行渲染.(這樣的功能可以實現404的效果)

重定向

自定義路由

云服務器 GPU云服務器 ReactRouter v4 v4包 v4.php

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

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

ReactRouter升級 v2 to v4

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

JasonZhang 2019-08-20 17:26 評論0 收藏0
NiceFish-React

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

Terry_Tai 2019-08-26 13:43 評論0 收藏0
【進階4-2期】Object.assign 原理及其實現

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

layman 2019-08-23 18:04 評論0 收藏0
webpack 構建性能優化策略小結

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

hiYoHoo 2019-08-21 11:21 評論0 收藏0
FEDay 參會小記

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

xcc3641 2019-08-19 17:53 評論0 收藏0