React Router Dom exact path

很喜歡松菸的湖

參加了六角學院的鐵人賽，希望能夠用簡短的文章把每次寫程式遇到的問題記錄下來。

<Switch>
   <Route path="/" component={HOME} />
   <Route path="/A" component={A} />
   <Route path="/B" component={B} />
   <Route path="/C" component={C} />
</Switch>

以上程式碼有什麼問題嗎？如果在不同路徑間切換，會發現只顯示 HOME ，因為 path 屬於模糊配對，也就是確認到 / 相同以後之後的路徑都會被歸類為 /，顯示 Home component。（光是找出這個 bug 就花了我一小時快哭了 (・ω・｀)……….. ）

<Switch>
  <Route path="/A" component={A} />
  <Route path="/B" component={B} />
  <Route path="/C" component={C} />
  <Route path="/" component={HOME} />
</Switch>

以上這樣寫也可以，把 HOME 擺在最後面，或是加上 exact ，代表路徑必須符合才會跳轉

<Switch>
  <Route exact path="/" component={HOME} />
  <Route path="/A" component={A} />
  <Route path="/B" component={B} />
  <Route path="/C" component={C} />
</Switch>

如果想要在找不到分頁的時候回到首頁要怎麼辦呢？可以利用 exact 的特性讓 HOME 沒有帶上 exact ，頁面就會回到主畫面了

<Switch>
   <Route exact path="/A" component={A} />
   <Route exact path="/B" component={B} />
   <Route exact path="/C" component={C} />
   <Route path="/" component={HOME} />
</Switch>

台灣新竹泰崗溫泉 野溪溫泉