react-router v4 之 啥是<Switch>

原文翻譯:


<Switch>

? 渲染第一個被location匹配到的并且作為子元素的<Route>或者<Redirect>

? 使用<Switch>包裹和直接用一打<Route>s有什么區(qū)別呢?

? <Switch>是唯一的因為它僅僅只會渲染一個路徑。相比之下(不使用<Switch>包裹的情況下),每一個被location匹配到的<Route>將都會被渲染。認真思考一下圖1-1的代碼:


圖1-1

? 如果URL是/about, 那么<About>,<User>,和<NoMatch>將都被渲染,因為它們的path全都被匹配到。設計如此,允許我們通過<Route>s以多種方式去構建我們的應用,比如:sidebars 和 breadcrumbs,bootstrap tabs,等。

? 然而,有時,我們只想選擇性的渲染一個<Route>。如果URL是/about我們并不想也匹配到/:user(或者顯示給我們404頁面)。參閱圖1-2,看看如何使用<Switch>來處理這個問題的:


圖1-2


? 現(xiàn)在,如果URL是/about,<Switch>將會開始尋找相匹配的<Route>。<Route path="/about" />將會被匹配到,緊接著 <Switch>會停止繼續(xù)匹配并且渲染<About>。同理,如果URL是/michael,那么<User>將會被渲染。

聊一聊:


? 細心的同學會發(fā)現(xiàn)圖2中的<Route>有個exact屬性,它是干嘛的呢?我們先保留疑問接著往下走。

抱著試一試的心態(tài),我偏不使用<Switch>,請看下面一組圖

代碼:

圖2-1

運行結果一:

圖2-2

運行結果二:

圖2-3


? 觀圖2-2,因為"/"只匹配到了path="/"的<Route>所以正常渲染了頁面一。然而,觀圖2-3,"/second"先匹配到了path="/"的<Route>,接著又匹配到了path="/second/"的<Route>,于是把頁面一和頁面二都渲染了出來。

? ?終于, 經(jīng)過一番freestyle之后發(fā)現(xiàn)的確有坑需要用<Switch>來填。于是,代碼微調,再看下面一組圖

代碼:

圖2-4

運行結果三:

圖2-5

運行結果四:

圖2-6

? 看到運行結果四(觀圖2-6),我不禁呵呵了一下,感嘆世界真奇妙。此時,我們不妨暮然回首,其實答案就在原文翻譯的第一句話,對,就像那句換說的一樣,<Switch>只找到第一個被location匹配到的<Route>就立即停止繼續(xù)匹配,并且把它渲染出來。"/second"同時和"/","/second/"相匹配,因為先匹配到了前者,所以只有頁面一被渲染。

驗證一下,把兩者前后順序進行調整,請看下面一組圖

代碼:

圖2-7


運行結果五:

圖2-8

運行結果六:

圖2-9

? 經(jīng)過<Switch>的使用及順序的調整,我們終于得到了想要的結果,可是這樣就滿足了么?難道每次寫路由的時候都要嚴格控制書寫順序嗎?答案當然是否定的!

? 還記得"聊一聊"第一句中提到的<Route>有個exact屬性嗎?其實,上過小學的人都知道它是漢語“精確”的意思。這樣解釋起來就簡單很多,當<Route>添加exact屬性后只有URL和該<Route>的path屬性進行精確比對后完全相同該<Route>才會被渲染。

? 那么,我們把<Switch>和exact屬性結合起來使用呢?請看最后一組圖

代碼:

圖2-10

運行結果七:

圖2-11

運行結果八:

圖2-12

至此,我可以關機下班了

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 134,837評論 18 139
  • 作者:Tyler 編譯:胡子大哈 翻譯原文:http://huziketang.com/blog/posts/de...
    胡子大哈閱讀 2,211評論 3 15
  • React-Router v4 1. 設計理念1.1. 動態(tài)路由1.2. 嵌套路由1.3. 響應式路由 2. 快速...
    wlszouc閱讀 8,573評論 0 14
  • 這幾天閑下來想開發(fā)我個人網(wǎng)站的極客教程的移動web版本,然后發(fā)現(xiàn)之前弄的開發(fā)移動web的環(huán)境過于老舊,于是重新弄了...
    cbw100閱讀 2,678評論 0 4
  • React Router 4.0 (以下簡稱 RR4) 已經(jīng)正式發(fā)布,它遵循React的設計理念,即萬物皆組件。所...
    梁相輝閱讀 97,589評論 24 195