大家好，今天的篇章要介紹的是 React Router

會延續前一天的專案結構接續下去進行修改，如果沒有參與到昨天的建置過程，這邊也有提供原始碼
https://github.com/littlehorseboy/typescript-react/tree/day09-jss

React Router

React Router 是一個在 React 應用中使用路由的函式庫，你可以驅動你的 url 來改變畫面的呈現，就直接安裝下來用看看吧。

npm i react-router-dom

因為 typescript 需要明確的型別，還要額外安裝

npm i -D @types/react-router-dom

筆者會對 Router 額外開一個資料夾來放

+ src/router/Router.tsx

首先就是一定要用 <HashRouter> （或是 <BrowserRouter>，但筆者不熟悉正式機要如何正確配置，所以一直都是用 hash）在父節點包住其它 react-router-dom 提供的 component 才能正確使用。

然後 <Link> 會轉換成 <a>

<Route> 則是會去匹配目前 path 是否有對應到，來渲染定義的 component，要特別注意的是 exact 的屬性，有設置的話這代表該 <Route> 的 path 要完全匹配 url。

<Route> 所定義的那三個 component

+ src/components/day10/Home/Home.tsx
+ src/components/day10/About/About.tsx
+ src/components/day10/Blog/Blog.tsx

執行結果

然後示範動態的 url Parameters

筆者認為這有些 typescript 型別的眉角可以說明

改動一下 Router.tsx

這裡新增了兩個 <Link>

還有 <Route> 也有變化

接下來調整一下 Blog.tsx

這裡因為 typescript 型別的關係，從 react-router-dom 導出了 RouteComponentProps 這個型別定義來當 props 的型別

選定 RouteComponentProps 按下 F12，即可看到它究竟是提供了什麼

這樣我們就能夠正常的使用 location 和 match 了，才怪，上上一張的程式碼中，name 這個屬性它還是不認得，這時就要請泛型出場了，最後程式碼變成這個樣子

執行結果

為了讓 typescript 能正確的理解 match，就得好好搞清楚他們有什麼樣的型別定義一番。

另外，如果是用 Query Parameters （也就是 ?queryString=value 這一種）就不用處理這種強型別定義，location.search 就是純字串來使用而已，筆者是直接用 URLSearchParams(location.search) 這種方式來處理的。

以上就是筆者在使用 typescript + React Router 的時候的一點點小小心得

最後附上原始碼
https://github.com/littlehorseboy/typescript-react/tree/day10-react-router

明天會繼續講 React Router 的一些特別的使用方式！