react的路由中的switch和exact的使用

剛剛接觸react不久，發如今項目中的路由配置中會有switch和exact的使用，現總結以下

switch  爲了解決route的惟一渲染（僅僅渲染一個路由路徑）出現的

  <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>將會被渲染。

 

exact的做用

 再看下面一組圖

代碼：

 

 

 

圖2-4

 

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

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

代碼：

 

 

圖2-7

 

 

 

圖2-9

  通過<Switch>的使用及順序的調整，咱們終於獲得了想要的結果，但是這樣就知足了麼？難道每次寫路由的時候都要嚴格控制書寫順序嗎？答案固然是否認的！

<Route>有個exact屬性當<Route>添加exact屬性後只有URL和該<Route>的path屬性進行精確比對後徹底相同該<Route>纔會被渲染。

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

代碼：

 

 

 

圖2-10

連接：https://www.jianshu.com/p/ed5e56994f13