原文翻譯：

<Switch>

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

  使用<Switch>包裹和直接用一打<Route>s有什麼區別呢？

  <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

  現在，如果URL是/about，<Switch>將會開始尋找相匹配的<Route>。<Route path="/about" />將會被匹配到，緊接著 <Switch>會停止繼續匹配並且渲染<About>。同理，如果URL是/michael，那麼<User>將會被渲染。

聊一聊：

  細心的同學會發現圖2中的<Route>有個exact屬性，它是幹嘛的呢？我們先保留疑問接著往下走。

抱著試一試的心態，我偏不使用<Switch>，請看下面一組圖

程式碼：

圖2-1

執行結果一：

圖2-2

執行結果二：

圖2-3

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

   終於， 經過一番freestyle之後發現的確有坑需要用<Switch>來填。於是，程式碼微調，再看下面一組圖

程式碼：

圖2-4

執行結果三：

圖2-5

執行結果四：

圖2-6

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

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

程式碼：

圖2-7

執行結果五：

圖2-8

執行結果六：

圖2-9

  經過<Switch>的使用及順序的調整，我們終於得到了想要的結果，可是這樣就滿足了麼？難道每次寫路由的時候都要嚴格控制書寫順序嗎？答案當然是否定的！

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

  那麼，我們把<Switch>和exact屬性結合起來使用呢？請看最後一組圖

程式碼：

圖2-10

執行結果七：

圖2-11

執行結果八：

圖2-12

至此，我可以關機下班了